Background Image Help

[Chaos Residue]

If this question has been asked before then I apologize. I have searched Google and this website and found nothing that answers it so far.

I have a background image for my website that is 1680px by 1050px. I want this background image to be a fixed image and I want it to automatically re-size depending on the users screen resolution. Is this possible? If so, what do I need to do to make this happen?

If someone needs an example of what I mean, use this as an example. If someone has their screen resolution set to 800x600 then I want them to see the background image as a 800x600 fixed background image. If they change their resolution to 1280x960 then I want them to see the background image as a 1280x960 fixed background image. If they then change their resolution to 1680x1050 I want them to see the background image as a 1680x1050 fixed background image.

Screen Resolution = 800x600
Image Size becomes 800x600

Screen Resolution = 1280x960
Image Size becomes 1280x960

Screen Resolution = 1680x1050
Image Size becomes 1680x1050

[Lynne]

You'll have to use some CSS - http://css.flepstudio.org/en/css-tip...und-image.html

[Chaos Residue]

What CSS file am I supposed to be editing? I edited vbulletin.css and changed it from the default:

background:{vb:stylevar doc_background};

to this:

background:{vb:stylevar doc_background};
           {position:absolute};
           {height:100%};
           {width: 100%};
           {margin:0};
           {padding: 0};

Nothing seemed to change. Did I edit the wrong code? Or did I just do it incorrectly?

[Lynne]

Originally Posted by Chaos Residue

What CSS file am I supposed to be editing? I edited vbulletin.css and changed it from the default:

background:{vb:stylevar doc_background};

to this:

background:{vb:stylevar doc_background};
           {position:absolute};
           {height:100%};
           {width: 100%};
           {margin:0};
           {padding: 0};

Nothing seemed to change. Did I edit the wrong code? Or did I just do it incorrectly?

You wrote it wrong. Did you look at the link I linked to on how to write the CSS? you can't use the stylevar doc_background and then go try to change the background property in the same declaration like that.

[Chaos Residue]

So I removed linking to stylevar doc_background completely. This is what I now have:

	background:url(http://www.undergroundgamers.net/forums/images/misc/ugbg.jpg);
                   position:absolute;
                   height:100%;
                   width:100%;
                   margin:0;
                   padding:0;

My background image is in a different position now, but still not like it should be. It's like the image is blown up to a larger size that's too big for the screen. My forum is set to a fixed width (950px). Any changes I make to the width and height in the above code affect the forum itself, not the size of the background image. I apologize if I sound stupid (which, no doubt, I do), I'm kind of new to the whole editing CSS and I'm trying to learn as I go along. If you want to see what I'm talking about here's the forum: http://www.undergroundgamers.net/forums/

--------------- Added [DATE]1293188964[/DATE] at [TIME]1293188964[/TIME] ---------------

Here's an update. I've ended up with this code:

html {
        height:100%
        width:100%
        margin:0;
        padding:0;
	background:url(http://www.undergroundgamers.net/forums/images/misc/ugbg.jpg) center center no-repeat;
	<vb:if condition="is_browser('opera') && $stylevar['textdirection'] == 'rtl'">
		overflow-x: hidden;
	</vb:if>
}

This looks correct on the Forums section of the vB4 Suite, but at the top of the Blog section you'll notice an extra white space, the CMS section has no background image whatsoever, and the What's New section looks like it did when I was still using stylevar doc_background. Also, the background image is not a fixed image this way. Sheesh, this is a lot of work for a background...

[Lynne]

You forgot the ; after the height and width properties in your CSS and you would probably want to use "center top", not "center center", but besides that, I think what you need to do is edit the templates and add that background as an image, like in the tutorial I linked you to. See their page here - http://www.onsitus.it/css-tutorials/sfondo-100-percent/ Isn't that what you want? Look at the page source - the background is an image tag added to the page.

[BLacK_WaRZ]

A very old old thread but i have the same problem , can`t know what i should and i try to do what u saied but nothing happened > anyone can help?

[bela-meaad]

its better to open a new thread ^_^

[Lynne]

And we'll need a link to the style you have tried to implement the code in that tutorial.

[BLacK_WaRZ]

I send it in private msg!