背景图像不垂直重复
如果您滚动到此页面底部 - http://dev.socialadr.com/get/begin06 - 您会看到带有阴影的白色背景在接近末尾处停止。
这是我要垂直重复的图像文件: http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif
使用的 CSS 文件是: http://dev.socialadr.com/_css/css.php
我相信它是这个 #page_wrapper id 需要修改:
#page_wrapper {
width:1014px;
margin:0 auto;
padding:0;
min-height: 300px;
background: url(http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif) repeat-y center top;
height:100%;
}
我尝试过很多不同的事情,阅读了很多其他有关类似问题的 StackOverflow 帖子,但我一生都无法让它工作。
有什么想法吗?
谢谢! 凯恩
If you scroll to the bottom of this page - http://dev.socialadr.com/get/begin06 - you'll see that the white background w/ drop shadow stops near the end.
This is the image file that I want to repeat vertically:
http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif
The CSS file being used is:
http://dev.socialadr.com/_css/css.php
And I believe it's this #page_wrapper id that needs to be modified:
#page_wrapper {
width:1014px;
margin:0 auto;
padding:0;
min-height: 300px;
background: url(http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif) repeat-y center top;
height:100%;
}
I've tried tons of different things, read a bunch of other StackOverflow posts about similar issues but for the life of me I can't get it to work.
Any ideas?
Thanks!
Kane
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
尝试在 URL 两边加上引号:
Try placing quotes around the URL:
您的实时CSS不包括粘贴代码中给出的repeat-y属性。
此外,您的图像文件非常大。由于图像是平铺的,因此图像高度应该是一张平铺的高度。
您还应该将图像分成两部分,并将它们设置为两个不同元素的背景。平铺当前图像将包括带有角的框的顶部,这不是您想要的。将仅限角的图像设置为一个元素上的背景,然后使用重复 y 将平铺图像设置为另一个元素上的背景。
Your live CSS does not include the repeat-y property given in your pasted code.
Additionally, your image file is very large. Since the image is meant to be tiled, the image height should be the height of one tiling.
You should also break the image up into two pieces and set them as backgrounds on two different elements. Tiling the current image will include the top part of the box with the corners, which is not what you want. Set the corners-only image as the background on one element, then the tile image on another element with repeat-y.