Background-image URL cannot find path, background image cannot be displayed

Source: Internet
Author: User
Tags html header

Background-image cannot be displayed if the URL cannot find a path picture. We all know that we can't use absolute path, but the relative path I actually have a problem today, really stupid to die myself.

In CSS, use Background:url (.. /img/banner-bg.jpg); This is in CSS, so this path must be based on the path where the CSS (the stylesheet file) is located,

This is certainly not the same as the previous IMG src in HTML.

Link to this CSS is found from the root directory

Background-image:url directly from the path of the CSS file as a relative path.

As shown in the directory structure, the background-image of the style bg_list00 in the Css.css file should be defined as follows:

Background-image:url (.. /images/list_bg00.jpg); Font-weight:bold; Color: #ffffff;
}

The path is now successfully found,

Originally, this error stems from my misunderstanding of external CSS files. I always thought that when an external style sheet is referenced in HTML, the style defined in the style sheet file is equivalent to the style defined in the HTML header file. But it turns out that this is not the case, and it is still stored in the defined file and downloaded to the client. This is also clear from the practice of Background-image URL attribute definition, when defining a URL, if the absolute address is of course no problem, if it is a relative address, then, Be sure to have a relative style1.css path, regardless of the path of the HTML file that will reference it.

Finally, summarize:

When you define a URL property in an external style sheet, if you take a relative path, the path must be based on the path where the stylesheet file resides

Background-image URL cannot find path, background image cannot be displayed

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.