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
  #1  
Old Dec 16, 2010, 01:49 PM
juggledad's Avatar
juggledad
 
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 {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#wrapper {
position:relative;
z-index:1;
}
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.
 

Bookmarks

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.