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" /> HTML Code:
<img src="yourdomain.com/wp-content/images/background.jpg" id="bg" /> HTML Code:
img#bg { |
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 |
did you do step 3 + 4? please check it
|
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! |
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. |
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. |
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... |
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. |
Following the steps in this hint, you should't get a repeat since the image scales. What, exactly, have you done?
|
I've done all of this part:
Code:
4) go to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Top and add the following 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. |
Add a 'repeat-image: no-repeat;'
|
Quote:
|
What is the URL?
|
Quote:
|
ummm, go back and read step #3 - also I updated step #4 because of WordPress requirements.
|
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 08:40 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.