How to allow a div with a bg-image to go negative left?

[Amida]

Hello,

My first post here so, nice to meet you everyone! :)

I didn’t find an answer for this. Actually what I have is a website with a wide background picture (1536px) that serves as a map. I have some icons on it, for navigation. But the content zone is more at the center of the image, and what i want is that the browser centers this zone, allowing the left part of the image to go negative on the left if the user has a smaller screen. At this time, it’s stuck to the left limit of the background picture, and the user has to scroll to the right to see the content.

Any idea how to do that with css? (negative margin and things like that, I tried but always ended up with another problem, content not centered, etc.)

An image will be better to explain this, here it is:

http://anju.be/problem/explanation.jpg

Thx for any help :)

[noahgelman]

How about you try setting the div to the width of your content, and have that margin: o auto; and then set the image as the background to the body and position it top center. That way when the browser isn’t as wide as the image, it’ll still be centered in the middle.

[TheDoc]

[edit – Noah beat me to it!]

[noahgelman]

[Amida]

Ok that worked perfectly but another problem appears.

It’s that the body background keeps going negative left while the content div doesn’t. I have to do something to tell the browser "Hey man, stop to move the body background if the content div cannot go left anymore."

Well I was expecting it actually. It’s the same for the css-tricks website header: you will see that there is a moment where the header keeps going left (something like 20 px) while the content has reached the screen left border. (the * logo thing almost disappears)
In my case since it’s the body, it keeps moving forever and won’t stop.

Still looking for a solution. But thanks for your help!

[HeatherFeimster]

If you could post a live link, we might be able to help you out a bit more. It helps to see the html/css side by side – it could be a simple fix, but we can’t know without the code

[vijaywebmaker]

Hello,

If you are not aware of <div> tag means, Please use table format for better solutions.

For the table please assign "align:center" for the attributes. So that the table will align center of the wrapper and you can use the div tag inside the

Code:

<table align="center"><tr><td align:center><div>some content here</div></td></tr></table>

[TheDoc]

^^^^ Don’t use tables like that.

[Amida]

I made a test page,

one with my old configuration, : Problem is that users with small screen or small browser window have to scroll to the right to see the content. Here -> http://anju.be/test/imgoncontent/
CSS here: http://anju.be/test/imgoncontent/css/style.css

one with the image put to body background as said by Noah and TheDoc: Problem is that the bg image won’t stop going negative when content div stops. (just resize the window to see it)
Here -> http://anju.be/test/imgonbody/
CSS here: http://anju.be/test/imgonbody/css/style.css

@vijaywebmaker : I think you didn’t understand what I’m trying to do, hope you understand with the test page. I don’t think tables are useful in this case.

[TheDoc]

After looking at it, option number one (old config) definitely should be avoided at all costs. Can’t rely on everyone having a super wide resolution. For example, I work for a web development company and we all use two 19" monitors side by side, so even we get scrollbars with that option!

I would say, go with option two, make the width of your container 960px and you’ll only be missing out on around 1% of the population.

[Amida]

Ok I ‘ve found a way. (But I’m open to any better solution )

I didn’t set the image as a background, I just inserted it with <img src… /> in my content div that has a smaller width. The image can overflow since it’s not set as background. I just had to center it like this:

Code:

.centeredimg{
display:block;
position:relative;
left:-160px; /*+- half the difference between img, and content width*/
}

So now my content is below the image, I corrected it with a negative top, which value is the image height like this:

Code:

#content{
position:relative;
width:1200px;
margin:auto;
}

#content .inside{
position:relative;
z-index:50;
top:-1126px;
}

I can upload my solution if you are interested.

[TheDoc]

I have a feeling that IE isn’t going to like that very much – but I’d love to see the working solution.

[Amida]

Ok here it is. Seems to work in IE8, Chrome / Safary, Firefox 3.6. I guess I’ll have to check with other versions.

http://anju.be/test/proposedsolution/

Problem is that it’s not a background anymore, even if the result is close to the one expected.

[TheDoc]

I’m still getting a scrollbar! I definitely still think having it as a body background is the best way to go.

[Amida]

yes but that’s not possible, I haven’t found any way for the browser to prevent the body background from scrolling.

well it can be stopped with a trick that is:

Code:

body {display:table; width:100%}

But works correctly only in chrome/safari

[Author]

Posts