Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Background image auto resizing to screen (http://forum.bytesforall.com/showthread.php?t=6673)

marineceo Apr 10, 2010 10:24 AM

[SOLVED] Background image auto resizing to screen
I would like to find a way to used a fixed background image that automatically resizes to the screen (browser window).

I have tried a bunch of different css and html in different areas.

I must be missing something. I see it on other sites.

I want to put an image of something on each side of the content area (currently set at 85% screen width) that is fixed and positioned correctly regardless of browser window size.

Thanks everyone.

lambdaka Apr 10, 2010 11:35 AM

apparently u can't do a background resizable for the moment (will have to wait for css3)
I manage to do it with this code

html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
#arriere {
        /* l'image occupe toute la place du body */
        width : 100%;
        height: 100%;


<img id="arriere" alt="" src="image.jpg" />
after that you will be able to add text or whatever u want with a div in position:absolute;

hope will help !

juggledad Apr 11, 2010 05:01 AM

yes it is possible. Lets say you put your image in wp-contents/uploads and it is called bg.jpg, you will add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Top
HTML Code:

<img src="./wp-content/uploads/bg.jpg" class="bg" />
and then add this to ATO->Add HTML/CSS Inserts->CSS Inserts
HTML Code:

img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;
        /* Set up proportionate scaling */
        width: 100%;
        height: auto;
        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
div#container {
        /* This is the only important rule */
        /* We need our content to show up on top of the background */
        position: relative;

neat little trick some guy came up with.

No guarantees it will work in all cases - this will cause the image to show behing the contents aslo, if you want the image to be hidden behind the container, add 'background: #ffffff;' to the container css.

cvan Apr 11, 2010 11:47 AM

How would I take a smaller background image and repeat it all over the page?
Thank you

cvan Apr 11, 2010 12:03 PM

Nevermind...it was more simple than I thought. Just uploaded the image and went to body, links, text. Thanks :)

marineceo Apr 12, 2010 04:17 AM


Thanks I tried that but interesting problem occurred that I could not work around. The header which I have in "HTML Inserts: Header" and the footer which I have in "HTML Inserts: Body Bottom" end up behind the background image. The site is societypagemag.com.

Thank you very much.


juggledad Apr 12, 2010 06:14 AM

Whatis the URL?
What did you put in those areas?
Try adding a z-index

superheadline Mar 25, 2011 05:22 AM

Adding a lower z-index to "img.bg" and a higher one for "div.container" fixed it for me.


Webmason Apr 15, 2011 04:27 PM


This code worked like a charm for me... well at least for the home page. Trouble I'm having is, any other page I click to just has a white background. Did I miss something?


juggledad Apr 15, 2011 08:22 PM

what is the url?
What did you add - exactly?

Webmason Apr 18, 2011 03:22 PM

Ok, I'm still trying to nail this issue down. I have noticed that the url's that are not showing the background are in the categories.

For example:

http://domain.com/site/learn - The background shows.

http://domain.com/site/category/learn - No Background

Also no background on individual posts.

Does this help at all?


Webmason Apr 18, 2011 03:35 PM

Ok, it is fixed. I decided to us the whole URL of the image as opposed to relative. That did the trick.


All times are GMT -6. The time now is 08:25 AM.

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