CSS background picture background-image must pay attention to the path problem

css| background Picture | question

In the traditional table layout, the background image is directly applied to the table, in general, the Background-image attribute of CSS is used very little, or simply do not use. The application CSS page layout, realizes the content and the performance, the behavior separation, as the page frame, the decoration and so on the picture we directly peel to the CSS file, through the CSS to define.

We usually use link to refer directly to a CSS file in HTML (or other active document) files. We'll find that sometimes our pictures don't show. At this point, please check your CSS code, is not the duplicate settings have problems, is not the location of the picture has a problem. If these are all fine, remove the background duplicate and position properties and revert to default. If the picture is still not there, it can only be the path problem we are talking about today! In general, we are accustomed to setting picture paths like this:

Background-image:url (logo.jpg);
Background-image:url (.. /logo.jpg);
Background-image:url (.. /images/logo.jpg);

For the first case "url (logo.jpg)". We want to see if this picture is in the same directory as the CSS file. For the second and third cases, we are strongly not recommended, because our web page files may exist in a multilevel directory, the file location of the same directory is doomed to our relative path is not the same. And this complicates the problem, it is likely that the picture in this file to display normal, the first target, the picture can not find the shadow.

There is a way to easily solve this problem, we may create a common file directory, used to store some common picture files, JS scripts, CSS files, such as "common", we will be directly placed in the CSS file in the directory, you can also file pictures directly in the directory, If the picture file is more in its interior set up a directory to store the picture file "Common/images". We write directly in the CSS file: url (logo.jpg) or URL (images/logo.jpg) can handle the above problem.

Of course, this is only my suggestion, on the site file classification and storage, in addition to personal habits, but also to consider scientific. My method is not necessarily correct. If it is a large project, you should follow the team's agreement, otherwise these problems are enough headaches!