...

View Full Version : background positioning using css



spok61438
07-06-2007, 04:48 PM
hi,

I'm trying to get a picture (my background) to sit at the bottom left of the window no matter what resolution the viewer is using. I was wondering It could be done.

my actual css concerning body :

body

{

font:11px verdana, arial, helvetica, sans-serif;

color:#222;

background-color:white;
background-image: url(bg.jpg);
background-attachment: fixed;
background-position:70%;
background-repeat:no-repeat;

my site is : http://fizzmo.dyndns.org:8080 (http://fizzmo.dyndns.org:8080)

if any other information is necessary just ask.

thanks in advance for your help.

BWiz
07-06-2007, 04:50 PM
For me the picture IS set to the bottom left... (using FF2)

CaptainB
07-06-2007, 04:53 PM
Same here.... (IE6)

interlog
07-06-2007, 05:04 PM
The website doesnt load:S

spok61438
07-06-2007, 05:46 PM
maybe this picture will explain best what i mean

I use FF on the left and Opera on the right (only difference is number of bookmarks in the toolbar, which change the size of the visible window)

http://img385.imageshack.us/img385/9053/screenshotlcchartsmozilox7.png

BWiz
07-06-2007, 05:49 PM
Try this gopher:



background-position: bottom;

Graft-Creative
07-06-2007, 06:41 PM
Maybe give this a shot...


body {
font:11px verdana, arial, helvetica, sans-serif;
color:#222;
background: white url(bg.jpg) bottom left no-repeat;
}


That will keep the image plugged into the bottom left of the page at all times.

Gary

spok61438
07-07-2007, 04:01 AM
I tried both real quick and the proposition from BWiz is working and the other aint.

thank you very much for your help

Graft-Creative
07-07-2007, 01:42 PM
the proposition from BWiz is working and the other aint.
thank you very much for your help

Sorry, I neglected to add 'fixed' into the mix.

Try this:


body {
font:11px verdana, arial, helvetica, sans-serif;
color:#222;
background: white url(bg.jpg) fixed bottom left no-repeat;
}


BWiz's method results portions the headphone image being shoved off to the left and out of the viewport at lower resolutions/browser window sizes...the above doesn't - it keeps the image bottom left, without cutting any of it off, whatever the resolution. Try it, you'll see what I mean.

Hope that helps,

Gary

P.s. only tested in FF

spok61438
07-08-2007, 02:53 AM
thank you very much for your help dude working as expected :thumbsup:

have a good day



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum