How do I replace the agency bg image with this large image so it covers the whole bg horizontally and vertically?
This is what I changed the CSS to but the whole image is 40MB and slows the loading of the page.
background-position: top center;
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.
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:
background: url(images/bg.jpg) no-repeat center center fixed;
You can also use a jQuery plugin called Backstretch that’s really easy to set up and is likely a better option.
Thanks a lot Sunil and Jon..your tips were very helpful.
You’re welcome Herman!
You must be logged in to reply to this topic.
Are you a blogger, web designer, developer, or website owner looking to generate more income?
Promote products for the largest and fastest growing online website platform as part of our affiliate program.