Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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, 01:49 PM
juggledad's Avatar
23,729 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 06: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 06:53 AM
HOWTO: put your image in the header juggledad Header 71 Jan 12, 2011 02:42 PM
Can I make my Background Image Scalable jimzook Atahualpa 3 Wordpress theme 1 Dec 16, 2010 01:50 PM
HOWTO: have TWO background images on page Stingraynut Atahualpa 3 Wordpress theme 0 Apr 5, 2010 08:16 PM
Want to make background image visible through logo div keblake Header configuration & styling 4 Mar 11, 2009 09:32 PM

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

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