在 CSS 中定位两部分背景的最佳方法？
我有一个奇怪的背景，我正在尝试找出设计它的最佳方式。
因此，背景图像有两个部分，顶部部分具有独特的水平和垂直设计（约1024x700），然后底部部分具有独特的水平样式，但可以垂直重复。 (1024 x 1)
现在，我将顶部部分作为标题的背景图像，问题是它使我无法对所有页面内容进行样式设置，因为它太大了！
在 HTML 和 CSS 中编写两部分背景的最佳方法是什么？
页面布局如下：
div 容器
-> div 标题
-> div content
div footer
不过我当然可以更改...
谢谢！
凯文
I have a weird background I am trying to figure out the best way to style it.
So, there are two parts to the background image, the top part which has a unique horizontal and vertical design (its about 1024x700) then a bottom section that has a unique style horizontally, but can be repeated vertically . (1024 x 1)
Right now I have the top section being a background image for the header, the problem is that it screws me up for styling all of the page content because it is so big!
What would be the best way to code a two piece background like that in HTML and CSS?
Page is laid out like so:
div container
-> div header
-> div content
div footer
I can certainly change that though...
Thanks!
Kevin
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果我很好地理解你，这可能是一个解决方案：
对于底部部分，只需将 1px 图像的重复 x 应用于主体背景
对于顶部部分，将主容器 div 设置为以下样式：
width:100%；
背景：url（'your-image.jpg'）中心；
注意：未经测试
If I understood you well, this may be a solution:
for bottom section, simply do it with repeat-x of your 1px image applied to body background
for top-section, have your main container div styled with this:
width:100%;
background:url('your-image.jpg') center;
note:untested
摆弄 定位 和 z-index。
Fiddle with positioning and z-index.
那么停在页脚是困难的部分。通常对于这种类型的事情我会做类似的事情：
Well the stopping at the footer is the hard part. Normally for this type of thing i would do something like: