Question

首先我只是想把它放在那里我不太擅长编码，这对我来说是第一次。我在页脚上遇到了一些麻烦;页脚的背景，当它对于较大的计算机屏幕来说太小时，就像这样重复：http://prntscr.com/29fxeu

我希望得到背景，以便它自动调整到每个屏幕宽度以适应整个过程。那可能吗？我已经在JSFiddle上了解它：http://jsfiddle.net/HXs2A/1/

以下是使用的HTML :(如果有错误，请原谅我）

<body>
<!-- Footer border Start-->
<div id='footer-wrapper'>
<div style='clear:both;'/>
  </div>
<!-- Footer border End-->
<div id='lower'>

<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='Column 1' preferred='yes'/> 
</div>
<div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='Column 2' preferred='yes'/> 
</div>
 <div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='Column 3' preferred='yes'/> 
</div>
<div style='clear: both;'/>
</div>
</div>
</body>

CSS：

#footer-wrapper {clear: both;width: 100%; height:4px; background: #46A28D;}
/*----- Three Column Widget (Green Border) STARTS-----*/
#lower { 
margin:auto; 
padding: 0px 0px 10px 0px; 
width: 100%; 
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) repeat scroll 0 0 #222222; 
} 
#lower-wrapper { 
background: none; repeat scroll 0 0 #222222; 
margin:auto; 
padding: 20px 0px 20px 0px; 
width: 100%;
border:0; 
} 
#lowerbar-wrapper { 
background: none; repeat scroll 0 0 #222222; 
float: left; 
margin: 0px 5px auto; 
padding-bottom: 20px; 
width: 30%;
text-align: justify; 
color:#ddd; 
font: bold 12px Arial, Tahoma, Verdana; 
line-height: 1.6em; 
word-wrap: break-word; 
overflow: hidden; 
} 
.lowerbar {margin: 0; padding: 0;} 
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} 
.lowerbar h2 { 
margin: 0px 0px 10px 0px; 
padding: 3px 0px 3px 0px; 
text-align: left; 
border:0; 
color:#46A28D; 
text-transform:uppercase; 
font: bold 14px Arial, Tahoma, Verdana; 
} 
.lowerbar ul { 
color:#fff; 
margin: 0 auto; 
padding: 0; 
list-style-type: none; 
} 
.lowerbar li { 
display:block; 
color:#fff; 
line-height: 1.6em; 
margin-left: 0px !important; 
padding: 0px; 
list-style-type: none; 
} 
.lowerbar li a { 
text-decoration:none; color: #DBDBDB; 
} 
.lowerbar li a:hover { 
text-decoration:underline; 
} 
.lowerbar li:hover { 
display:block; 
background: #222; 
}

谢谢！

Answer 1

你的意思是背景大小？以下代码更改适用于我（CSS3）。

#lower { 
margin:auto; 
padding: 0px 0px 10px 0px; 
width: 100%; 
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png); 
background-size:100% 100%;
background-repeate: no-repeat;
}

请参阅http://www.w3schools.com/css/css3_backgrounds.asp

但是，较旧的浏览器可能会产生不同的结果。

Answer 2

#lower { 
  margin:auto; 
  padding: 0; 
  width: 100%; 
  height: 120px;
  background: #222222 url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) no-repeat;
  background-size: cover;
}

* 注意：在HTML中为元素分配属性时，请使用"代替'

右<div id="lower">

错误<div id='lower'>

Answer 3

到#lower 加 background-size: 100% 100%;

并删除height:120px;因为它会强制背景在奇数比例屏幕上拉伸。

如何使页脚背景拉伸屏幕的宽度

3 个答案: