Loading...

Use Scalable Background Image on Your Website

Sep-30-2009 | Author: | Blog, Web

Because I basically suck at coding a sweet background to use as website background, I naturally result to Photoshop to design the image…but I get stuck at this question: “Ok, so how exactly am I going to put this image in the background and make it so it doesn’t look cropped, leaving white space around the image?” If you’ve ever created or wanted to create a website using a static image, you’ve asked yourself this question.

After hours of Google searching, I found all sorts of ways to do this. You can call jQuery OR use the advanced, not yet implemented techniques of CSS3 and place parts of the image at different corners of the page (Safari is the only browser that can use CSS3 currently). I tried the CSS3 procedure, which was basically separating different image urls by a comma @ the body tag and defining their location. This is where I learned that designing a website in Safari is really not the best choice since it’s that must more advanced than what everyone else is using. So more searching brought me to a little German website (http://www.younic.de/) where I found THE trick, and, amazingly, it was about the only article on the site that’s in English.

Scaling body background images with pure CSS describes a SUPER easy way to add any image to your website’s background by placing this code after the <body> tag (without the first and last quotation marks):

"<style type="text/css">
#background
{
width:100%; height:100%; position: absolute; z-index: -1; top: 0; left:0;
}
</style>
</head>
<body>
<img id="background" src="yourbackgroundimage.jpg"/>"

In WordPress, your <body> tag is in the header file.

One thing I noticed about this code is that you might have to change “position: absolute” to position:fixed” if your website/background doesn’t operate correctly. Note that your image may be stretched to fit the widescreen displays if its not made for WS already. Check out where I’m currently using this.