How to center or change your background image

On 09.29.08, In General, Themes, by

The Buckmaker themes Aeros and Aerodrome feature 6 different background images: Default, Autumn, Desert, Golf, Sunflowers and Winter. It is easy to change them or use your own custom background image – this is one reason why the Aeros Theme became so popular. As many of you asked questions concerning the background images, I’d like to show you how to change and center them in this post.

Change your background image

To change a background image, look for this section of the style.css file located in your theme directory:

body {
background: url(images/default.jpg) no-repeat 0 0 #fff;
background-attachment:fixed;
color: #000;
font-family: Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
}

The highlighted part (default.jpg) is the background image. This file is located in the “images” folder in the theme directory. Replace “default.jpg” with another image out of the images folder, like winter.jpg or sunflowers.jpg. Mind that image names have to be written exactly as in the folder, i.e. mind upper and lower case, blanks, hyphens and so on. This is a common error source in the beginning.

You can also use your own background image: First choose an image you like – possibly one of your own shots or taken out of a free stock photo site like sxc. Keep in mind that images are generally not “free” as long as the owner does not permit usage. Using images from webpages or other sources can be dangerous and may lead to legal actions against you. To be safe, only use images that are royalty free and licensed under an appropriate license like Creative Commons 2.0 or GPL. Flickr allows you to search exactly for this kind of images.

So you’ve found your custom image. Now open it with a picture editing software like Windows Office Picture Manager or the free GIMP Image Manipulation Program – I love it. Resize your image to a height of at least 1024 px. Save it as a compressed file like .jpg. In most cases you are asked for the desired picture quality or compression level. Set it to a lower level and check the file size – it should not exceed 100KB for faster page loading times. You’ll have to find a compromise between image quality and image size. Copy your custom image into the /images folder of the theme and change the image path as described above.

Center your background image

As I’ve learned out of your feedback, it is not enough to only size your background image high enough. Many internet users have 20”, 22” or even bigger screens and although your image is big, it may not be cinemascope-wide in most cases. As the main container of Aeros and Aerodrome are centered, the background image should be centered too. This will be included in the upcoming versions.

To change it yourself, again look for this part of the style.css file, and insert the highlighted line:
body {
background: url(images/golf.jpg) no-repeat 0 0 #fff;
background-attachment:fixed;
background-position: top center;
color: #000;
font-family: Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
}

Now you should see the background image in the horizontal center of your screen, starting on top of your page. You can also center both horizontal and vertical alignment by using “center center” instead of “top center”. That’s it.