Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header (http://forum.bytesforall.com/forumdisplay.php?f=43)
-   -   HOWTO: Make a scalable background image (http://forum.bytesforall.com/showthread.php?t=11763)

juggledad Dec 16, 2010 12:49 PM

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.

andyklevorn Dec 20, 2010 09:13 AM

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

juggledad Dec 20, 2010 10:50 AM

did you do step 3 + 4? please check it

jstein Dec 25, 2010 06:33 PM

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!

juggledad Dec 26, 2010 05:14 AM

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.

superheadline Jan 6, 2011 11:51 AM

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.

GarethP May 12, 2011 06:16 AM

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...

brianbotkiller Oct 8, 2011 02:41 AM

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.

juggledad Oct 8, 2011 03:58 AM

Following the steps in this hint, you should't get a repeat since the image scales. What, exactly, have you done?

brianbotkiller Oct 8, 2011 03:53 PM

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.

juggledad Oct 8, 2011 05:31 PM

Add a 'repeat-image: no-repeat;'

brianbotkiller Nov 3, 2011 08:16 PM

Quote:

Originally Posted by juggledad (Post 73558)
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?

juggledad Nov 3, 2011 08:21 PM

What is the URL?

brianbotkiller Nov 3, 2011 08:23 PM

Quote:

Originally Posted by juggledad (Post 75059)
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.

juggledad Nov 4, 2011 04:40 AM

ummm, go back and read step #3 - also I updated step #4 because of WordPress requirements.

JaneFancher Mar 16, 2012 01:28 PM

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.


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

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