The css setting background image and background color are not displayed_html/css

Code in html Body:

css code:

#footer{background-color:#17AEC9; height:3000px; text-align :center; width:980px; overflow:hidden;}
#footer a{color:#FFDDDF; margin:auto 10px;}

There are only these contents in the file, no other settings, background color Not displayed.

In addition, background:url(images/head_02.jpg) no-repeat;height:400px;width:980px;the background image is not displayed, the length and width of the div and the size of the image are set in other files same. Because other background image settings in the same file can be displayed, the file path should be correct.

Looking forward to your answers!

Reply to discussion (solution)

#footer{ background-color: #17AEC9; height:3000px; text-align:center; width:980px ; overflow:hidden;}

If you set the background color here, it will conflict with the background image. If you want to use an image, you cannot use the background color! Removed the background color!

I said the display is correct. . .

Try removing the comments

The css comment is

/* css comment syntax */

to: yingying901029

This code is just The background color is set, and the background image is set in another file.

After removing the comment or changing it to /* --- */, the background color displays normally, but I also wrote this in other files. Some background images can be displayed, and some cannot. This Why?

My background color is displayed here.

Did you forget to add the style tag to the css?

Follow the steps below to solve the problem:

1. View the image and reduce the pixels of the image to 380px, 960px; refresh the test.

2. The background color will not be displayed when there are pictures. Remove the color.
3. If the folder where your CSS is located is at the same level as the folder where the image is located; change the image path to background:url(../images/head_02.jpg) and refresh the test.
4. Check whether there is any interference from other CSS.
If you can’t find the problem anymore, create a new page and insert a background image to take a look.

I suggest that the poster take a look at all the involved files, so that you can’t see them one by one.

There is an images folder and Untitled-1.html, Untitled under the site. The files in -2.css, index.html and index.css, Untitled-1.html, Untitled-2.css are as follows:

  @charset "utf-8";/* CSS Document */body{width:980px; margin:0 auto; font-family:"宋体";font-size:13px; line-height:18px;}a{text-decoration:none;}.aHover a:hover{color:#00A9B3;}.clear{clear:both;}.center{text-align:center;}img{border:0px;} ul{padding:0;}/*经典项目*/.best{background:url(images/best.jpg) no-repeat; width:262px; height:350px; padding-top:20px;}.best a{color:#626262;}.best ul{ height:20px; }.best ul li{float:left; width:130px; text-align:center;list-style:none; }

Copy after login

like this The display is normal, but the background image cannot be displayed after I copy it to the index.html and index.css files respectively.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link rel="stylesheet" type="text/css" href="Untitled-2.css"/></head><body><!--经典项目-->  <div class="best">    <ul style="margin-top:70px;">      <li><a href="#">数字2C无缝丰胸</a></li>      <li><a href="#">鼻部综合整形</a></li>    </ul>    <ul style="margin-top:52px;">      <li><a href="#">美肤OPT王者风范</a></li>      <li><a href="#">除皱 3+全效除皱</a></li>    </ul>    <ul style="margin-top:50px;">      <li><a href="#"> 韩式改脸型</a></li>      <li><a href="#">眼部综合整形</a></li>    </ul>    <ul style="margin-top:58px;">      <li><a href="#">360度环状立体吸脂</a></li>      <li><a href="#">专利微创瘦小腿</a></li>    </ul>  </div><!--class="best"--></body></html>

Copy after login

[/code]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link rel="stylesheet" type="text/css" href="index.css"/></head><body>  <img src="images/head_01.jpg" />      <div class="banner"><img src="images/banner.jpg" /></div>  <!--flash新闻-->  <div class="flash">    <div class="flashHead">    </div><!--class="flashHead"-->      <div class="flashCont">      <img src="images/flashNews_04.jpg" />    </div><!--class="flashCont"-->     <div class="flashBottom">    </div>  </div>      <!--经典项目-->  <div class="best">    <ul style="margin-top:70px;">      <li><a href="#">数字2C无缝丰胸</a></li>      <li><a href="#">鼻部综合整形</a></li>    </ul>    <ul style="margin-top:52px;">      <li><a href="#">美肤OPT王者风范</a></li>      <li><a href="#">除皱 3+全效除皱</a></li>    </ul>    <ul style="margin-top:50px;">      <li><a href="#"> 韩式改脸型</a></li>      <li><a href="#">眼部综合整形</a></li>    </ul>    <ul style="margin-top:58px;">      <li><a href="#">360度环状立体吸脂</a></li>      <li><a href="#">专利微创瘦小腿</a></li>    </ul>  </div><!--class="best"--></body></html>[code=CSS]@charset "utf-8";/* CSS Document */body{width:980px; margin:0 auto; font-family:"宋体";font-size:13px; line-height:18px;}a{text-decoration:none;}.aHover a:hover{color:#00A9B3;}.clear{clear:both;}.center{text-align:center;}img{border:0px;} ul{padding:0;}/*flash新闻*/.flash{width:275px; height:350px; float:left;}.flashHead{background:url(images/flashNews_01.jpg) no-repeat; height:4px;}.flashCont{background:url(images/flashNews_08.jpg) repeat-y; height:auto; padding:3px;}.flashBottom{background:url(images/flashNews_09.jpg) no-repeat; height:5px;}.flashCont img{width: 266px; height:340px;}/*经典项目*/.best{background:url(images/best.jpg) no-repeat; width:262px; height:350px; padding-top:20px;}.best a{color:#626262;}.best ul{ height:20px; }.best ul li{float:left; width:130px; text-align:center;list-style:none; }

Copy after login

I don’t know if the poster made the lowest mistake. According to the two parts you said, this is completely fine.

<style>#footer{background-color:#17AEC9; height:3000px; text-align:center; width:980px; overflow:hidden;}#footer a{color:#FFDDDF; margin:auto 10px;}</style><div id="footer">  <a href="#">医院介绍</a>|  <a href="#">医院环境</a>|  <a href="#">美容设备</a>|  <a href="#">文化活动</a>|  <a href="#">新闻动态</a>|  <a href="#">专家介绍</a>|  <a href="#">整形博客</a>|  <a href="#">联系我们</a>  </div>

Copy after login

Can you only filter out the relevant parts of the code given by the poster, don’t list them all, it will make you dizzy.

The code given behind is filtered, and the first two are not The problem is that the background images of the two latter ones are not displayed because there are other divs inside. There are also some problems with the arrangement. Could you experts please take a look at it.

I am also struggling with this issue~~