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


  #1  
Old Dec 16, 2010, 12:49 PM
juggledad's Avatar
juggledad
 
23,492 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
  #2  
Old Dec 20, 2010, 09:13 AM
andyklevorn
 
1 posts · Dec 2010
I've got a background running, but it only appears on one page, which is sort of set as the "home" page although it's not supposed to be.
http://www.smith-eddy.com
  #3  
Old Dec 20, 2010, 10:50 AM
juggledad's Avatar
juggledad
 
23,492 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
did you do step 3 + 4? please check it
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Dec 25, 2010, 06:33 PM
jstein
 
95 posts · Sep 2010
Iv'e just tried this and can't seem to get it to work. My URL is http://cifect.org/. Can you help me get my background to show?

Thanks!
  #5  
Old Dec 26, 2010, 05:14 AM
juggledad's Avatar
juggledad
 
23,492 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
your code is pointing the background at http://cifect.org/wp-content/themes/...ackground7.png but there is no image by that name in that location.

you are also using http://cifect.org/wp-content/images/...allpaper19.jpg and there is no image at that location.

If you can't type the url into the address bar and have the image show, it will never work in the theme.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Jan 6, 2011, 11:51 AM
superheadline
 
2 posts · Jan 2011
Got that running, have you got any idea how i could combine that with different backgrounds on different pages (I tried: http://forum.bytesforall.com/showthread.php?t=9525)?

I only get one of the two running at the same time.

thanks in advance to everybody reading.
  #7  
Old May 12, 2011, 06:16 AM
GarethP
 
64 posts · Jun 2010
As an update

since ATA V3.6.7 and the banning of using PHP in theme options by WordPress, you can no longer use <?php bloginfo('wpurl'); ?> and will have to code the path to the graphic explicitly...
  #8  
Old Oct 8, 2011, 02:41 AM
brianbotkiller
 
13 posts · Jan 2010
Can anyone tell me how I can cause the background image to not repeat when it reaches its maximum height in my page? I have tried all the no repeats I can, and nothing.

I am using the method outlined above here - it works, and I have an image that is 1600x3000, but apparently that's not enough. When you get to the bottom of my page, the BG repeats, and looks like crap.

Any thoughts are appreciated. Thanks.
  #9  
Old Oct 8, 2011, 03:58 AM
juggledad's Avatar
juggledad
 
23,492 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Following the steps in this hint, you should't get a repeat since the image scales. What, exactly, have you done?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Oct 8, 2011, 03:53 PM
brianbotkiller
 
13 posts · Jan 2010
I've done all of this part:
Code:
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" />
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;
}
And my BG image is 1600x3000.

I know the image is being pulled from the right location on my server.

It doesn't repeat often, but if a page has a very long post, or many posts, It seems to repeat at the bottom.

You can see what I've done at http://www.vertigovenus.com

Thanks very much for the input.
  #11  
Old Oct 8, 2011, 05:31 PM
juggledad's Avatar
juggledad
 
23,492 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Add a 'repeat-image: no-repeat;'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Nov 3, 2011, 08:16 PM
brianbotkiller
 
13 posts · Jan 2010
Quote:
Originally Posted by juggledad
Add a 'repeat-image: no-repeat;'
So, I added this to the img#bg section, and the #wrapper section, and the image still repeats at the bottom... not sure what is going on?
  #13  
Old Nov 3, 2011, 08:21 PM
juggledad's Avatar
juggledad
 
23,492 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What is the URL?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Nov 3, 2011, 08:23 PM
brianbotkiller
 
13 posts · Jan 2010
Quote:
Originally Posted by juggledad
What is the URL?
http://www.vertigovenus.com. It only shows when I have three REALLY long posts on the blog page. Otherwise, it's fine.
  #15  
Old Nov 4, 2011, 04:40 AM
juggledad's Avatar
juggledad
 
23,492 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
ummm, go back and read step #3 - also I updated step #4 because of WordPress requirements.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #16  
Old Mar 16, 2012, 01:28 PM
JaneFancher
 
16 posts · Nov 2011
juggledad:

thanks a heap! I really wanted this. I did have to add a / to the front of yourdomain.com in this

<img src="yourdomain.com/wp-content/images/background.jpg" id="bg" />

statement. Don't know if that's just my setup, or if others will run into the same problem.

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 09:41 AM.


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