Trying to make large background image remain centered with an auto margin centered content div, but bg image should not affect layout

i want a background image that is larger than the content, which will remain centered with the content, but will not affect the layout (meaning no scrollbars to accomodate the background image). the content *must* be centered using margin: auto; so that the left side will remain flush with the left side of the viewpane, when the viewpane becomes smaller than the content. I have seen this question asked several times, and have tried quite a few solutions, but none of the accepted answers have actually worked. **Edit to Clarify** This question is still a bit murkey, so I will attempt to clarify with some images showing what I need. In these images, green is the background image, red is the main content, and blue is the browser's viewpane. ![enter image description here][1] **A:** When the viewpane is smaller than both the background image and the main content, the left side of the content remains flush with the left side of the viewpane, the background image remains centered to the main content, the viewpanes scrollbars will only scroll out to the right edge of the main content (and not to the right edge of the background). **B:** When the viewpane is larger than both the background image and content, both remain centered to the viewpane. **C:** When the viewpane is the same size as the main content, the background image should remain centered to the main content, no scrollbars should be present. [1]: http://i.stack.imgur.com/hiKPp.jpg
I don't quite understand what you're talking about.

以上就是Trying to make large background image remain centered with an auto margin centered content div, but bg image should not affect layout的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏