Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » FAQ - Atahualpa » Header »

HOWTO: Make a scalable background image

Prev Previous Post   Next Post Next
Old Dec 16, 2010, 12:49 PM
juggledad's Avatar
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
HOWTO: Make a scalable background image

Updated 1/21/2015
here is an easier way to do it using the CSS3 'background-size: cover;' option. Just set a background on the HTML element by adding this to the CSS Inserts
html {background: url(http://yourdomain.com/wp-content/images/background.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: left top;

That's it, all done.


If you would like to have your background image shrink and grow when someone makes the page smaller or larger, you can do it by following the following instructions

1) create a folder in the 'wp-content' folder called 'images' (or what ever name you want to use)
2) add your large image (say 1600 x 1600) called 'background.jpg' into the 'images' folder
3) go to ATO->Body, Text & Links->Body Style and remove the 'background' statement if there is one
4) go to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Top and add the following
HTML Code:
<img src="<?php bloginfo('wpurl'); ?>/wp-content/images/background.jpg" id="bg" />
NOTE: As of 3.6.4 you need to change this to
HTML Code:
<img src="yourdomain.com/wp-content/images/background.jpg" id="bg" />
5) go to ATO->Add HTML/CSS Inserts->CSS Inserts and add
HTML Code:
img#bg {

#wrapper {
That's it. Your background image should now scale. You can use a gif and probably a png for the image. This was tested in Safari, IE8 and Firefox.
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jan 21, 2015 at 05:59 AM.


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
HOWTO: make a custom text style on post/page pakacil Center area post/pages 24 Jul 18, 2011 05:53 AM
HOWTO: put your image in the header juggledad Header 71 Jan 12, 2011 01:42 PM
Can I make my Background Image Scalable jimzook Atahualpa 3 Wordpress theme 1 Dec 16, 2010 12:50 PM
HOWTO: have TWO background images on page Stingraynut Atahualpa 3 Wordpress theme 0 Apr 5, 2010 07:16 PM
Want to make background image visible through logo div keblake Header configuration & styling 4 Mar 11, 2009 08:32 PM

All times are GMT -6. The time now is 08:07 AM.

Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.