5 replies [Last post]
JimmyPez
JimmyPez's picture
Offline
Regular
NY
Last seen: 12 years 41 weeks ago
NY
Joined: 2007-03-15
Posts: 18
Points: 0

Okay, Ive attached a diagram so you can check it out.

Basically - I have a very long background image (its like 2000x800) that I want to basically be "centered" on any monitor. this image is setup w/ a 800px space in the center, where I will place my content div.

I get the content div to center no problem, but how do I center the background?

I tried a few things

.backer{background:url(../assets/outerbg.jpg) no-repeat; margin:0 auto; height:819px;} .content{width:900px; background:url(../assets/innerBg.jpg) repeat-x; margin:0 auto; height:819px;}

the html at the moment is just

blah

I tried to set the background as fixed, left 50% margin-left: -1000px;

Im a little lost- any help would be apppreciated

AttachmentSize
diagram.jpg4.18 KB
emmtqg
Offline
Regular
Last seen: 10 years 50 weeks ago
Timezone: GMT-5
Joined: 2007-04-20
Posts: 44
Points: 0

background: color url position tiling ;

Hi,

If I get your diagram correctly, you could specify the background position of your bg image to be:
background { #fff url(../assets/outerbg.jpg) top center no-repeat; }

would give you a centered background. You can specify position in your background property w/
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

Your's seems like it needs a top center! I used a default color just in case your image is somehow unavailable at some time.

Then you could center your content with the same background spec w/ your content background url. Your content would then also have to have a margin:0 auto; for FF and text-align:center for IE (and width, etc. to contain your content).

Hope this helps.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

close, but all your

emmtqg wrote:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

close, but all your background properties are backwards.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

JimmyPez
JimmyPez's picture
Offline
Regular
NY
Last seen: 12 years 41 weeks ago
NY
Joined: 2007-03-15
Posts: 18
Points: 0

Thanks

emmtqg-thanks that worked, what a simple answer...thanks

emmtqg
Offline
Regular
Last seen: 10 years 50 weeks ago
Timezone: GMT-5
Joined: 2007-04-20
Posts: 44
Points: 0

from w3c?

JimmyPez - glad it helped.

Deuce - I'm stumped - I got that from http://www.w3schools.com/css/css_background.asp ?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Hmm, I've always thought it

Hmm, I've always thought it was the other way around.
:bigoops:

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph