Navbar下面的图片

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

我试着看着其他职位，但无法弄清楚这样做。

我想要做的就是这个形象。我做了什么使它像瓷砖一样可重复使用，因此它延伸到了最后。由于

<!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; 
}

来源

2016-09-28 killrMac

这将是巨大的，如果你能某处上传'tileBG.gif'并通过代码段或添加一个工作示例的jsfiddle –

这可能是一个重复的帖子，但感谢您抽出时间来帮助解决这个问题，我确实得到了它的工作。对不起，我的原帖，我第一次发布混淆。由于某种原因tileBG.gif，未加载。我正在离线工作。但尽快加载到我的网络服务器，它正确加载。下次我会尝试上传到JsFiddle。谢谢。 – killrMac

不知道的问题，但要重复地砖边的方式，你可以使用repeat-x

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

来源

2016-09-28 02:31:39 deviantxdes

你可以使用background-repeat风格的图案背景图形，而

值repeat-x表示背景重演水平而不是垂直方向
值repeat-y表示重演垂直方向而不是水平和
值repeat装置的水平和垂直重演。

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

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; }

<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>

来源

2016-09-28 02:47:27

谢谢，这工作。对不起，我的帖子混乱。我的主要问题是我的原始链接没有加载，我想也许我在我的CSS文件或HTML做了错误。但我上传文件到我的网络服务器和背景加载。 – killrMac

Navbar下面的图片

回答

相关问题