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 1 year, 7 months ago.

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

    Herman
    Participant
    Post count: 90

    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
    Post count: 87

    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
    Post count: 109

    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:

    [css]

    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;
    }

    [/css]

    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
    Post count: 90

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

    #11592

    Sunil
    Participant
    Post count: 87

    You’re welcome Herman! :)

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

You must be logged in to reply to this topic.