如何将背景图像添加到导航栏?

时间:2019-04-02 17:50:08

标签: html css

我无法在导航栏中添加图像。 我尝试添加

#header, #nav {
background-image: url("https://img.freepik.com/free-photo/white-marble-texture-background_38679-514.jpg?size=626&ext=jpg") repeat;
}

HTML:      

<nav>
  <ul>
  </ul>
</nav>
</header>

CSS:

  #header #nav { 
  background-image: url(https://img.freepik.com/free-photo/white-marble-texture-background_38679-514.jpg?size=626&ext=jpg);
  background-repeat: repeat;
}

我希望导航栏具有大理石背景

2 个答案:

答案 0 :(得分:0)

尝试一下。另外,我将您的背景图像样式更改为仅背景,以便您可以包括“重复”速记属性。 html

<header>
    <nav>
        <ul></ul>
    </nav>
</header>

css

    header, nav {
    background: url("https://img.freepik.com/free-photo/white-marble-texture-background_38679-514.jpg?size=626&ext=jpg") repeat;
    width: 300px;
    height: 200px;
}

答案 1 :(得分:0)

首先,您要为ids标头和nav的元素分配css属性。如果是这种情况,请将id属性添加到每个元素。

第二个background-image属性仅允许您设置背景图像,但您希望图像重复,而请使用background

最后,背景图片需要元素具有定义的高度或内容才能可见

这是最终代码的外观:

#header, #nav 
{
    background: url("https://img.freepik.com/free-photo/white-marble-texture-background_38679-514.jpg?size=626&ext=jpg") repeat;
    height: 100px;
}
<header id="header"> 
  <nav id="nav">
    <ul></ul>
  </nav>
</header>