Replace agency bg with large bg image

Community Forums Forums Design Tips and Tricks Replace agency bg with large bg image

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  Sunil 2 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10987

    Herman
    Participant

    How do I replace the agency bg image with this large image so it covers the whole bg horizontally and vertically?

    http://upload.wikimedia.org/wikipedia/commons/1/17/Messier_15_HST.jpg

    This is what I changed the CSS to but the whole image is 40MB and slows the loading of the page.

    body {
    background-image: url(images/bg.png);
    background-position: top center;
    }

     

     

    #11447

    Sunil
    Participant

    The resolution for this image is pretty big. It doesn’t do any good for your site by placing this image as background as it will take a long time to load. You will not get any traffic probably.

    If you have photoshop, than you can save this image for web-based image thus reducing the file size significantly and without much disturbing the resolution of the image. That means, saving it as a gif instead of jpg.

    If you don’t have photoshop, you can go to http://www.gimp.org to download this free software and can do similar things to reduce the file size.

    #11457

    Jon Bellah
    Participant

    Yeah, you’ll definitely want to compress that image down. However, to answer your question how to get the background CSS to work correctly, you want to use:

    
    body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    
    

    You can also use a jQuery plugin called Backstretch that’s really easy to set up and is likely a better option.


    Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

    #11568

    Herman
    Participant

    Thanks a lot Sunil and Jon..your tips were very helpful.

    #11592

    Sunil
    Participant

    You’re welcome Herman! :)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.