Question

自从我在网站上工作以来已经有一段时间了。我正在尝试为我的公司创建一个网站。我有一个导航栏，但我想在导航栏下面有一个图像。

我试着查看其他帖子，但无法做到这一点。

我想做的就像这张图片。我做了什么让它可重复像一块瓷砖，所以它延伸到最后。感谢

<!DOCTYPE html>
<html lang="en">
<head>

<title>Modern Studio </title>


<link href="css/style3.css" rel="stylesheet" type="text/css">


</head>

<body>
    <div class="header">
        <div class="container-fluid"> 


          <div class="navbar-header">
            <ul">
              <li><a href="#">Home</a></li>
              <li><a href="#">Custom</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Account</a></li>
              <li><a href="#">Sign in</a></li>
              <li><a href="#">Checkout</a></li>
            </ul>
          </div>
        </div> 
     </div>  



    </body>
</html>

CSS

body{
    background-image: url("img/tileBG.gif");
    width:100%;
}

.container{
    width: 1200px;
    margin: 0 auto;
}

.header{
    background-image: url("img/tileBG.gif");
    width:100%;
    top: 0;
    position:fixed;
}



.logo{
    float:left;
    margin-left: -250px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

a{
    text-decoration:none;
    color: black;
}

li{
    list-style: none;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    float: left;
    margin-left: 15px;
    padding-top: 20px;
    font-size:20px;
}

.nav{
    float:left;
}

Answer 1

不确定问题，但要重复方块，可以使用repeat-x

.header {
    background-image:url("img/tileBG.gif");
    background-repeat:repeat-x;
}

Answer 2

您可以使用background-repeat样式进行带图案的背景图形

值repeat-x表示背景将水平重复但不垂直重复
值repeat-y表示垂直重复但不是水平重复
value repeat表示水平和垂直重复。

JsFiddle：https://jsfiddle.net/Zay_DEV/z4k97ytm/

＆＃13;

body{
    background-image: url("img/tileBG.gif");
    width:100%;
}

.container{
    width: 1200px;
    margin: 0 auto;
}

.header{
    background-image: url("img/tileBG.gif");
    width:100%;
    top: 0;
    position:fixed;
}



.logo{
    float:left;
    margin-left: -250px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

a{
    text-decoration:none;
    color: black;
}

li{
    list-style: none;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    float: left;
    margin-left: 15px;
    padding-top: 20px;
    font-size:20px;
}

.nav{
    float:left;
}

/* New Code */
.header {
    background-image: url("https://t3.ftcdn.net/jpg/00/88/47/70/500_F_88477046_P7TlUumCGSrEsFEKZs0xNWoJif4drHP6.jpg");
    background-size: 10%;
    background-repeat: repeat;
}
.header a { background-color: rgba(0, 0, 0, .5); color: #fff; }

＆＃13;

    <div class="header">
        <div class="container-fluid"> 


          <div class="navbar-header">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Custom</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Account</a></li>
              <li><a href="#">Sign in</a></li>
              <li><a href="#">Checkout</a></li>
            </ul>
          </div>
        </div> 
     </div>

＆＃13;

Navbar下方的图片

2 个答案: