CSS background repeat-x问题

时间:2014-09-10 10:39:54

标签: css html5 css3

我是CSS的初学者,我尝试做一些事情,但我遇到了一些问题,这是我的问题

我有这个CSS代码的和平来重复水平背景但我想要背景来覆盖我写的不多(在我写的东西下面显示了额外的颜色,我无法上传我的照片)

<!DOCTYPE html>
<html>
<head>

<style>
.Container_16 {
margin-left:auto;
margin-right:auto;
width:960px;


}

.Container_5 {

float:left;

}
#Title {
font-size:68px;
font-family:sans-serif;
}
.Container_11{

float:left;

color:white;
}
li{
list-style-type:none;
display:inline;
padding-left:15px;
color:white;
font-size:20px;
font-family:sans-serif;
margin-top:30px;
}
nav{
margin-left:150px;
text-align:right;
margin-top:30px;
margin-right:250px;
}

body{
min-width:960px; 
background-image:url("bg.png");
background-repeat:repeat-x;

}

</style>
<body>
<div class="Container_16">
<div class="Container_5" id="Title"><a href="http://www.facebook.com" target="_blank">Book.me</a>       </div>
<div class="Container_11"><nav>
<ul>
<li>one</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav></div>
</div>

</body>
</head>
</html> 

2 个答案:

答案 0 :(得分:0)

要仅将背景图像应用于Facebook链接,请使用此css:

#title > a {
    background: url('bg.png') repeat-x;
}

答案 1 :(得分:0)

因为您将background提供给body。我看到你有<div class="Container_16"> 你有你所有的文字。因此,您只能将背景设置为该div。

<强> CSS

body{
min-width:960px; 
}
.Container_16 {
margin-left:auto;
margin-right:auto;
width:960px;
height:100px;
background-image:url("image.png");
background-repeat:repeat-x;
}

<强> DEMO