Trying to make a large background image is still centered centered on the separator, but the bg image should not affect the layout

Question

I need the background image to have more content that will remain in the center of the content but not affect the layout (this means no scroll bars to fit the background image). Content should be centered using margin: auto; so that the left side will remain flush with the left side of the viewing area when the viewing area becomes smaller than the content.

I asked this question several times and tried quite a few solutions, but none of the accepted answers worked.

Edit to clarify

This question is still a little murky, so I will try to clarify some of the images showing what I need. In these images, green is the background image, red is the main content, and blue is the browser view pane.

A:. When the viewing area is smaller than the background image and the main content, the left part of the content remains flush with the left side of the viewing area, the background image remains centered to the main content, scroll bars in the sheets will scroll only to the right edge of the main content (and not to the right edge of the background).

B: When the viewport is larger than the background image and content, they remain centered in the viewport.

C: If the viewport is the same size as the main content, the background image should remain in the center of the main content, no scrollbars should be present.

Answer 1

Updated answer . I still spent too much time on this :-), especially when it ended so simply. It allows you to determine the size of the background depending on the height of the container, which apparently differs from the yunzen solution. Now margin: 0 auto; used margin: 0 auto; . Still growing with container height.

View a new response.

You can view the original, more complex answer that does not use the auto marker.

HTML:

 <div id="Bkg"> <div id="Content">Content goes here. </div> </div> 

CSS

 #Bkg { width: 100%; min-width: 300px; /* equals width of content */ background:url('http://dummyimage.com/400x20/ffff00/000000&text=Center') repeat-y top center; padding-bottom: 50px; } #Content { width: 300px; margin: 0 auto; } 

Answer 2

I think this is what you want

---

HTML

 <div id="content"> content<br/><br /><br/> content<br/> </div> <div id="background"><div></div></div> 

---

CSS

 html, body { height: 100%; } #background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; /* this is the height of the bg image */ min-height: 600px; z-index: -1; } #background > div { margin: 0 auto; background: url("http://lorempixel.com/800/600/sports/2") no-repeat 50% top gray; width: 100%; height: 100%; /* this is the height of the content */ min-width: 500px; /* this is the width of the bg image */ max-width: 800px; /* this is the height of the bg image */ max-height: 600px; z-index: -1; } #content { /* these are just some numbers */ width: 500px; height: 400px; border: 1px solid gold; margin: 0 auto; background: rgba(255,255,255,0.2); } 

Answer 3

Well, if it expands beyond the size of the browser window, it will create a scroll bar for the entire window. I was not sure exactly which scrollbar you're trying to prevent.

max-width says that "under no circumstances will this box exceed this width." Thus, the field is more than just expanding beyond parental boundaries.

See jsFiddle.

Answer 4

If I understand the question correctly, I believe that this is what you want.

 .main-container { height: 1005px; left: 50%; margin-left: -560px; position: relative; width: 1120px; } 

To hide scrollbars you can add

 overflow: hidden; 

For horizontal only:

 overflow-x: hidden; 

Answer 5

Try the following:

 <div id="wrapper" style="position:relative;margin:auto;width:200px;height:200px;"> <div id="image" style="position:absolute;top:0px;left:-100px;width:400px;height:400px;background-image:url(your_bgimage);background-repeat:no-repeat;background-position:top center;"> <div id="content" style="position:absolute;top:0px;left:100px;width:200px;height:200px;"><p> <p>/* YOUR CONTENT */</P> </div></div></div> 

For some reason, I could not get the z-index to work, but if you can, you can put your content in wrapper too, and content not needed.

Answer 6

Given the original diagram, I suggested that the background image should be like this: the image might be hi-res, not a repeating pattern. You may want to play with css3 background-size a property that is convenient for this particular purpose. It is well supported by modern browsers and regresses sufficiently if you need to support IE8 and under it.

 body { background-image:url(/*nice higher res picture*/); background-size:cover; background-repeat:no-repeat; } 

http://jsfiddle.net/YyzAX/