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

先把我得代码贴一下：
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7登陆页面6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
     body{          //背景全蓝色
                          margin:0px;
padding:0px;
font-size:12px;
background-color:#007CBF;
overflow:hidden;
text-align:center;
}
#container{
                       //网页容器
width:980px;
}

#login{
                          //放上一张图片436*273像素，但是图片出不来
background-image:url(images/xiongdi.gif);
     width:436px;
height:273px;
margin-top:120px;

}
#form{
                          //把用户名和密码form放在上面的表格上去，我觉得这两个东西虽然是用div套起来的，但是应该算是单独的两个元素吧，这里设175放在图片的合适位置，但是它好像和图片成为一块，设置这个的margin时候图片跟着动，设置上面的login时候，form也跟着动！！为什么？？？                             
                       margin-top:175px;
                     }

#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;
}
    531ac245ce3e4fe3d50054a55f265927

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
e0e6b80c2b871989cf94b51f0a97caf2
    
     632e27c3aa96ac486b57e04571b19ce3
         3f44b33c791f1c420f39aac77a9dde29
                ff9c23ada1bcecdd1a0fb5d5a0f18437
                    c3778c9b7b6eb1837d0ecfa752f65699 
                         dc6dce4a544fdca2df29d5ac0ea9906b用户名：e19482f9d6f5a1c23e542ef524fe76a916b28748ea4df4d9c2150843fecfba68
                          dc6dce4a544fdca2df29d5ac0ea9906b 密码：c4bd35c9ef4b630ed3a3c1cb1c4c910616b28748ea4df4d9c2150843fecfba68
                     16b28748ea4df4d9c2150843fecfba68
                     59f311df1edfa1e48c08e1724f1e6402
                        5f2038e1f8424a86c4c8754cf9503e83
                         aff4f24b8d851532c064d1be3f8d74ec
                     16b28748ea4df4d9c2150843fecfba68
                f5a47148e367a6035fd7a2faa965022e
            16b28748ea4df4d9c2150843fecfba68

        16b28748ea4df4d9c2150843fecfba68
                         
    16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
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. 3bb3ba5d8a8c1e677360c9d603cb067b 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.