Replace agency bg with large bg image

[Herman]

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

 

 

[Sunil]

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.

[Jon Bellah]

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

[Herman]

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

[Sunil]

You're welcome Herman! 🙂

[Author]

Posts