How to set the navigation bar background image in css-CSS Tutorial-php.cn

How to set the navigation bar background image in css

WBOY

Release： 2021-11-26 17:50:11

Original

8664 people have browsed it

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.

How to set the navigation bar background image in css

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>

Copy after login

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

Copy after login

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!