God comes to the rescue: the background-image cannot be displayed! _html/css

Home

Web Front-end

HTML Tutorial

God comes to the rescue: the background-image cannot be displayed! _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:18 PM

先把我得代码贴一下：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

登陆页面

The problem in the code has been pointed out. Someone can help me take a look and give some advice. I just use html to know this problem, but it is useless. css, so don’t ask me to change css

Reply to the discussion (solution)

1. There is a problem with the picture. I tested it and there is no problem. Please check if the path is written wrong. Is the picture name correct?
2. The login should be relatively aligned {position:relative;}, and the elements inside it should be absolutely positioned {position:absolute;left:xxxpx,right:xxxpx;}. This way you can place it wherever you like. 436px;

height:273px;

margin-top:120px;

}Try removing that comment?
#login {
// Put a picture 436*273 pixels, but the picture can not come out. 436px;
height:273px;
margin-top:120px;

}Try removing that comment? I didn’t write comments, this is for everyone to understand

1. Problem with the picture, I tested it and there is no problem, please see if the path is wrong and the picture name is not wrong
2. The login should be relatively aligned {position:relative;}, and the elements inside it should be positioned absolutely {position:absolute;left:xxxpx,right:xxxpx;}. This way you can place it wherever you like. I still can't. I thought about it and the principle of nesting divs should be correct, but why can't it come out? When I just started showing pictures, I used Dreamweaver to develop them. Is it compatible with IE? question! !

If you don’t write comments, it will be fine for me to test.

No problem, maybe the LZ path is wrong.

No problem, maybe the LZ path is wrong.

But I use Dreamweaver to develop, write background- image: A box will automatically pop up for you to select an image, and the path will appear after selection. Moreover, the image I got is placed under the html folder/image, so I think it should be fine! !

And I put this image under this html folder/image

background-image:url( images/xiongdi.gif);

If you didn’t write a comment, I have no problem testing it. Thanks! The picture is losing. I developed it using Dreamweaver and wrote it as an HTML file. Do you all use IE to open it?

And the image I got is placed in this html folder/image
background-image:url(images/xiongdi.gif);

Sorry, I wrote it wrong: images hey-hey. Thank you very much for being so attentive! ! Can you take a screenshot of your web page and show it to me? Trouble

Quoting the reply from bbjbepzz on the 8th floor: And I have this image placed under this html folder/image

background-image:url(images/xiongdi.gif);

Sorry, I made the mistake of writing it as images hehe. Thank you very much for being so attentive! ! Can you take a screenshot of your web page and show it to me? Trouble

Quote from the 10th floor huangleijay’s reply:
Quote from the 8th floor bbjbepzz’s reply: And I have this image placed under this html folder/image

background-image :url(images/xiongdi.gif);

Sorry, I made the mistake of writing it as images hehe. Thank you very much for being so attentive! ! Can you take a screenshot of your web page and show it to me? Sorry, what kind of browser is this? Can you move the username and password input part to any part of the picture? When I was able to display images, these two things seemed to be connected, although I used nested divs to cover them! !

You are using the front-end, my CSS is not very good. Below is the code I changed for you. You can change it yourself to see the effect. Remember to write the image path correctly first. I used the path here.

<!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>		<title>登陆页面</title>		<style text="text/css">			body{				margin:0px;				padding:0px;				font-size:12px;				background-color:#007CBF;				overflow:hidden;				text-align:center;			}			#container{				width:100%;				position:absolute;			}			#login{				background-image:url(bbhh.jpg);				width:436px;				height:273px;				margin-top:120px;			}			#form{				position:relative;				top:100px;				left:100px;			}			#inp div input{				width:120px;				height:15px;				background-color:#333;				border:0px;				color:#0FF;			}			#button {				margin-left:25px;				margin-top:8px;			}			#button input{				border:0px;				width:49px;				heigth:18px;				color:#666;				margin-left:8px;				cursor:hand;			}		</style>	</head>	<body>		<div id="container" align="center">    			<div id="login">				<div id="form">					<form>						<div id="inp"> 							 <div>用户名：<input type="text" name="username"/></div>							  <div> 密  码：<input type="password" name="password"/></div>						 </div>						 <div id="button">							<input type="submit" value="注册" />							 <input type="button" value="登录" />						 </div>					</form>				</div>			</div>                         		</div>	</body></html>

You need to move the username and password to any position and change the style below.
#form{
position:relative;
top:100px;
left:100px;
}

Just change the top and left to what you think is appropriate The location is fine.

It is recommended that the code format should be better written, and the indentation should be indented. It seems to have a sense of hierarchy and is comfortable to read.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

See all articles

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

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat Commands and How to Use Them

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),