Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to set up the background picture of the navigation bar in css". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to set the background picture of the navigation bar in css".

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

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

How to set the background picture of navigation bar by css

In css, you can use the background-image attribute to set the navigation bar background image, and the background-image attribute to set the background image for the element.

The background of the element occupies the full size of the element, including the inner margin and the border, but not the outer margin.

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

Let's take a look at how to use the background-image attribute to set the background image through an example, as shown below:

First, let's create a navigation bar

Document * {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;} Home news contact us dynamically about us

Output result:

At this point, the navigation bar does not have a background image. You just need to add a "background-image:url" style to the navigation bar element. 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:

At this point, I believe you have a deeper understanding of "how to set the background picture of the navigation bar in css". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.