Home > Article > Web Front-end > How to set the navigation bar background image in css

How to set the navigation bar background image in css

WBOYOriginal: 2021-11-26 17:50:118541browse

In CSS, you can use the "background-image" attribute to set the background image of the navigation bar. This attribute is mainly used to add a background image to the element. You only need to add "background-image:url" to the navigation bar element. (Picture path);" style is enough.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to set the navigation bar background image in css

In css, you can use the background-image attribute to set the navigation bar background image, background- The image attribute sets the background image for the element. The background of an

element occupies the entire size of the element, including padding and borders, but not margins.

By default, the background image is placed in the upper left corner of the element and repeats horizontally and vertically.

Let’s take an example to see how to use the background-image attribute to set the background image. The example is as follows:

First we create a navigation bar

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    *{margin:0;padding: 0;}
   ul{
       list-style-type: none;
       overflow: hidden;
       
       position: fixed;
       top: 0;
       width: 100%;
       
   }  
   li {
       float: left;
   }   
   li a {
       display: block;
       color: white;
       text-align: center;
       padding: 14px 16px;
       text-decoration: none;
   }   
   li a:hover{
       background-color: red;
   }   
</style>
</head>
<body>
<ul>
   <li><a href="#home">首页</a></li>
   <li><a href="#news">新闻动态</a></li>
   <li><a href="#contact">联系我们</a></li>
   <li><a href="#about">关于我们</a></li>
</ul>   
<div style="background-color:pink;height:1500px;"></div>
</body>
</html>

Output Result:

How to set the navigation bar background image in css

#At this time, the navigation bar does not have a background image. You only need to add the "background-image:url(picture path);" style to the navigation bar element. That is Yes, the example is as follows:

ul{
       list-style-type: none;
       overflow: hidden;
       background-image:url(1118.02.png);
       position: fixed;
       top: 0;
       width: 100%;
   }

Output result:

How to set the navigation bar background image in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set the navigation bar background image in css. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set the color of css table boxNext article：How to set the color of css table box

See more

How to set the navigation bar background image in css

Related articles