Wordpress Themes - WP Forum at BFA - [SOLVED] Background image auto resizing to screen

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

Hi,
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
CSS

Code:

html, body {

        margin: 0;

        padding: 0;

        height: 100%;

        width: 100%;

}

#arriere {

        /* l'image occupe toute la place du body */

        width : 100%;

        height: 100%;

}

HTML

Code:

<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

Juggledad,

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.

Chuck

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.

cheers,
superheadline.net

Webmason

Apr 15, 2011 04:27 PM

Greetings,

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?

Thanks,
Tom

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?

Tom

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

Tom

All times are GMT -6. The time now is 01:46 PM.