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
  #1  
Old Dec 16, 2010, 12:49 PM
juggledad's Avatar
juggledad
 
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 {
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 05: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 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 06:19 AM.


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