Web Front-end
HTML Tutorial
The css setting background image and background color are not displayed_html/css_WEB-ITnose
The css setting background image and background color are not displayed_html/css_WEB-ITnose
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.
Follow the steps below to solve the problem:
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; }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>
[/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; }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>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~~
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
