How to center or change your background image
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.
Related posts
25 Comments »
RSS feed for comments on this post. TrackBack URL
Hi!
Aero is excellent theme! Thanks for you creativity!
Thanks
Excellent theme and nice support 
Keep up the good work
How can I remove the Blogrole and Meta options in the right pane? I do not want to show the options… Please help…
Thanks in advance
Excellent theme and thank you. It is exactly what I was looking for.
I have an issue and some questions.
1. embedded videos aren’t aligning correctly since I installed the theme. This also includes other flash like NexGen Gallery. How can I fix this?
2. I noticed on your site that subpages are below the header and to the left. How can I enable that on my site with your theme? I believe that to be more intuitive than subpages showing to the left of the parent page.
3. I saw it mentioned somewhere else about random or rotating backgrounds. If you know of any capable plugin developers perhaps they can write a simple plugin that does just that with some advanced features like uploading new backgrounds or assigning a specific background to certain posts, days, dates and so on.
Thanks again for the great post. I can’t wait to figure out the flash alignment so I can use it on my other site.
@Sana: use Widgets under “Design”
@Mike: 1. how should they align and on which theme does it work like you want?
2. these are no subpages but links positioned manually - I’ll work on subpages for the next versions
3. Most users want to use one single background for their site not to confuse their readers.
Hi Joe,
Thanks for the quick response. Both on the front page and the single post page the embedded flash (video or nexgen) is overaligned to the left and top. At the very least I’d like them in the post
there is an example four posts down on my recently resurrected blog.
Hi Mike, which browser do you use? Everything seems OK in the posts in FF & IE7. I see a podcast player to the right but don’t know how this should look like. To help you, I need full information: which post, what exactly is not displayed properly, how should it look like? Do the problems only appear with this theme?
Thanks for the reply… But I haven’t used any widgets… It is shown by default in your theme… I want to disable blogroll and meta which is showed on your theme’s right pane…
@Sana: you SHOULD USE widgets. once you use them all other sidebar entries disappear.
Oh… thanks a lot… I’m being a noob :)… This is my first time experience with wordpress…. Have to learn
I believe I do not have to use the search widget since your theme got one in built??? ( When I use search widget, search is appearing in 2 places )
Thanks for the promptly replies
Hi Joe,
I figured out the source of the problem thanks to your question. The problem is with Google Chrome.
IE7 - no rounded corners but still looks great
FF3 - looks great!
Opera - looks great!
Chrome - flash not aligned, has rounded corners and looks great.
So the problem is with Google Chrome. Not that many people are using it yet so I don’t know how big of a deal this is.
Hi Joe…
Is there any way to reduce the transparency in the bottom “Older Posts” and “Newer Post” elements? it is a bit hard to see them because their transparency is higher than the normal post background… Pls help
Thanks
@Sana: look for .navbar in style.css and set values of “opacity: ….” higher
Decided to give changing the background of Aeros theme today using your instructions. Worked like a charm.
Although with my screen resolution and browser window size only the top part of my photo was visible. I wanted the whole photo to show without repeating over and over. I also wanted a dramatic effect of color without distracting through the top post.
What I came up with was leaving the no-repeat in the css, using a photo of my own farm that faded to black silhouette near the bottom and changing the background of the page to black.
I can get my whole photo viewed within the first post, or single post pages will show the whole photo without repeating and it appears seamless.
Now on to more customizing. Love this theme. Thanks for releasing it!
Hi… is it possible to make the about page as the default loading page? I want to rename home tab as blog as well… Please let me know if this can be done… Thanks… (Thought it is easier to maintain all details in WP rather than creating a separate web page as my home page)
Thanks
Hi, very good theme, it really stands out among the rest for an original approach. I love it but I’m one of those who really would like to see the possibility for smooth changing background images at say 10 sec interval.. is this at all possible without using flash or similar tools?
Thanks
The theme is awesome. I would like to add an extra column, exactly as you’ve done on your theme. Could you point me in the right direction or give me the code to paste in?
Many thanks!
Sam Page
@ Sam: the Aerodrome Theme has 3 columns - you could copy+paste the code from there
I love this theme.
Thanx
Excellent jod very impressive! Thanks for the inspiration
VERY MUCH THANKS 4 your beautiful theme
C’est Sans doute le plus, et le plus intelligent skin pour WP.
Bravo !
I totally love this theme.
One question (it may have already been asked and answered). How do I change the RSS image in the top right corner? I’m wanting to put a custom logo there.
Thanks
@Tim W: you’d have to change rss2.jpg in the images folder. There are two images combined to one to make the hover effect possible; the link is to be found in header.php. For more info just google ‘link img hover’ or something related
joe please help me with the custom links on aeros theme.
Thanks