身体背景不显示

时间:2015-05-05 11:18:25

标签: html css

所以我只想把背景简单地放在我的页面上,但什么都没发生..背景适用于同一页面上的另一个Div,但不是在身体背景本身上



<!DOCTYPE HTML>
<html>
	<head>
		<title>iDeas.com</title>
		 <link rel="stylesheet" href="css/uikit.min.css"/>
		 <link href='http://fonts.googleapis.com/css?family=Dosis:500' rel='stylesheet' type='text/css'>
		 <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
	     <script src="js/jquery.js"></script>
	     <script src="js/uikit.min.js"></script>
	</head>

	<body background="background.jpg" style="font-family: 'Dosis', sans-serif;">
		<div id="main_container" >
			<div id="sub_container">
				<div id="header_container">
					<h1 class="uk-h1" style="font-family:'Shadows Into Light',cursive; font-size:110px;margin-left:29%;margin-top:120px;position:absolute;">Welcome To <span style="color:yellow">i</span>Deas.com</h1>
				</div>
				<div id="body_container">
					<div id="form_container">
						<div id="form_position" style="position:absolute; margin-left:42%; margin-top:300px;" >
							<div class="uk-form" style="padding:50px 50px 50px 50px; background:url('img/triangle_bg.jpg'); border-radius:2px 2px 2px 2px;">
								<form autocomplete="off" method="post">
									<div class="uk-form-row">
										<span class="uk-icon-user uk-icon-small" style="border-radius:5px 0px 0px 3px; padding:11px 14px 14px 17px; background:#E6E6E6;">&nbsp;</span><input autocomplete="off" style="border-radius:0px 3px 3px 0px; font-family: 'Dosis', sans-serif; width:230px; height:45px; font-size:16px;" type="text" name="username" placeholder="Username" required="">
									</div>
									<div class="uk-form-row">
										<span class="uk-icon-lock uk-icon-small" style="border-radius:5px 0px 0px 3px; padding:11px 14px 14px 19px; background:#E6E6E6;">&nbsp;</span><input autocomplete="off" style="border-radius:0px 3px 3px 0px; font-family: 'Dosis', sans-serif; width:230px; height:45px; font-size:15px;" type="password" name="password" placeholder="********" required="">
									</div>
									<div class="uk-form-row">
										<input class="uk-button" type="submit" name="login" value="Log In" style="width:280px; height:40px; font-size:20px; border-radius:3px 3px 3px 3px">
									</div><br>	<br>
									<div class="uk-form-row">
										&nbsp;Dont have an account..? Register <a href="">Here</a>
									</div>	
								</form>
							</div>
						</div>
					</div>
				</div>
				<div id="footer_container">
				</div>
			</div>
		</div>
	</body>
</html>
&#13;
&#13;
&#13; 它位于同一个文件夹中,没有子目录只是为了确保,我甚至尝试了内联样式&#34; background:url ...&#34;但这不起作用,或者只是为什么它不起作用真的很困惑。我在另一个名为test.php的页面上工作,它有相同的图像目录并且在同一文件夹中我没有​​问题

4 个答案:

答案 0 :(得分:2)

在指定<!DOCTYPE HTML>时,您要告诉浏览器使用HTML5呈现您的网页。 background属性在HTML4中已弃用,在HTML5中不再存在。

执行此操作的最佳方法是改为包含一些CSS:

body {
    background: url(background.jpg);
}

要将此功能纳入您的网页,您可以使用style元素,将以下内容放入您的页面<head>

<style type="text/css">
    /* Your CSS here. */
</style>

或者创建一个单独的.css文件,并使用<link>元素将其包含在您的网页上:

<link rel="stylesheet" href="myStylesheet.css">

演示

&#13;
&#13;
body {
  background: url(http://placehold.it/64x64);
}
&#13;
&#13;
&#13;

如果您确实坚持使用内联样式,则可以改为使用HTML style属性。这通常是不好的做法,因为单独的CSS文件将更容易维护:

<body style="background: background.jpg">
    ...
</body>

答案 1 :(得分:0)

要使用<body>标记在后台显示图片,您需要这样做:
<body style="background-image:">

答案 2 :(得分:0)

您不必篡改uikit css文件,您可以创建自己的.css并将其附加到您的HTML中。

如果您的背景未显示,可以使用<html class='uk-height-1-1'><body class='uk-height-1-1'>

答案 3 :(得分:-1)

<!DOCTYPE HTML>
<html>
	<head>
		<title>iDeas.com</title>
		 <link rel="stylesheet" href="css/uikit.min.css"/>
		 <link href='http://fonts.googleapis.com/css?family=Dosis:500' rel='stylesheet' type='text/css'>
		 <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
	     <script src="js/jquery.js"></script>
	     <script src="js/uikit.min.js"></script>
	</head>

	<body  style="font-family: 'Dosis', sans-serif;background:url(http://www.h3dwallpapers.com/wp-content/uploads/2014/11/Plain_Background_06.jpg)">
		<div id="main_container" >
			<div id="sub_container">
				<div id="header_container">
					<h1 class="uk-h1" style="font-family:'Shadows Into Light',cursive; font-size:110px;margin-left:29%;margin-top:120px;position:absolute;">Welcome To <span style="color:yellow">i</span>Deas.com</h1>
				</div>
				<div id="body_container">
					<div id="form_container">
						<div id="form_position" style="position:absolute; margin-left:42%; margin-top:300px;" >
							<div class="uk-form" style="padding:50px 50px 50px 50px; background:url('img/triangle_bg.jpg'); border-radius:2px 2px 2px 2px;">
								<form autocomplete="off" method="post">
									<div class="uk-form-row">
										<span class="uk-icon-user uk-icon-small" style="border-radius:5px 0px 0px 3px; padding:11px 14px 14px 17px; background:#E6E6E6;">&nbsp;</span><input autocomplete="off" style="border-radius:0px 3px 3px 0px; font-family: 'Dosis', sans-serif; width:230px; height:45px; font-size:16px;" type="text" name="username" placeholder="Username" required="">
									</div>
									<div class="uk-form-row">
										<span class="uk-icon-lock uk-icon-small" style="border-radius:5px 0px 0px 3px; padding:11px 14px 14px 19px; background:#E6E6E6;">&nbsp;</span><input autocomplete="off" style="border-radius:0px 3px 3px 0px; font-family: 'Dosis', sans-serif; width:230px; height:45px; font-size:15px;" type="password" name="password" placeholder="********" required="">
									</div>
									<div class="uk-form-row">
										<input class="uk-button" type="submit" name="login" value="Log In" style="width:280px; height:40px; font-size:20px; border-radius:3px 3px 3px 3px">
									</div><br>	<br>
									<div class="uk-form-row">
										&nbsp;Dont have an account..? Register <a href="">Here</a>
									</div>	
								</form>
							</div>
						</div>
					</div>
				</div>
				<div id="footer_container">
				</div>
			</div>
		</div>
	</body>
</html>