Question

我是一个相当新的代码和采取婴儿步骤我遇到的问题：交换背景图像。我对构成网站背景的三个图像进行了非常的轻微调整。一个是主要的背景图像（在一个bodywrap容器中）加载得很好。接下来是一个带有repeat-y属性的包装器图像，该属性在交换后不再占用 - 图像显示，但只是显示为单个白线，而它意味着“填充”页面的其余部分。最后，页脚图像根本没有显示出来。

我认为用当前只能在photoshop中稍微调整过的图像来换掉当前的图像（我所做的只是删除阴影和红色边距）将是一件容易的事 - 我的错误！

我尝试调整代码而无处可去，所以我复制了原始代码。我相信问题出在我的CSS中：

#wrapper, footer, .pagetop, .copyright {
width:942px; 
margin:0 auto; 
padding:0px 37px 0px 37px; 
overflow:hidden; 
clear:both; 
}

.bodywrap {
background: url(images/background.png) 49.9% 0% repeat-x; 
width:1016px; 
margin:auto; 
overflow:hidden;
}

#wrapper { 
background: url(images/wrapper.png) 49% repeat-y; 
clear:both; 
padding-bottom:25px; 
min-height:225px;
}  

.footer {
background: url(images/footer.png) no-repeat 51% 0%; 
overflow:hidden; 
min-height:107px; 
font-size:1.2em; 
padding-top:17px;
font-family: 'Francois One', sans-serif;
}

提前感谢您分享您的专业知识！

Answer 1

我首先看到你的背景说明不一致。您的无重复在对齐值之前和之后。我建议尝试在代码中的任何地方保持相同。当你的代码变重时，可能会让人感到困惑。

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}


right means align the image on the x axe to the right and
top means align the image on the y axe to the top

您是否理解您的49.9％值告诉背景图像从您所在框的边缘开始以49％向左重复。

你的.bodywrap也没有高度。如果你只看到一个小行，这是因为你的元素只占用了这个元素内容的空间。你可能有一个空格或一行代码。很难说没有HTML。

因此，您需要为.bodywrap元素指定一个与图像高度相等的最小高度或高度。您作为元素背景提供的图像不定义该元素的高度。 <img>标记和图像背景的工作方式不同。 <img>标签会自行确定其高度，但不能像背景那样重复。

您可以在此处查看有关背景的更多信息：http://www.w3schools.com/css/css_background.asp

改变背景图像

1 个答案: