Html 使用css将背景图像添加到div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20064596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-28 22:09:54 来源:igfitidea点击:
Adding background image to div using css?
提问by Orahmax
I have been trying to add background image to a div class using css. but have no success.
我一直在尝试使用 css 将背景图像添加到 div 类。但没有成功。
HTML code:-
HTML代码：-
<header id="masthead" class="site-header" role="banner">
<div class="header-shadow"></div>
<hgroup></hgroup>
<nav role="navigation" class="site-navigation main-navigation">
</nav><!-- .site-navigation .main-navigation -->
</header><!-- #masthead .site-header -->
CSS:-
CSS:-
.header-shadow{
background-image: url('../images/header-shade.jpg');
}
Additional information:
附加信息：
This is an image with shadow and i am using it at the top of the website, so it mustn't have a particular width.
这是一个带阴影的图像，我在网站顶部使用它，所以它不能有特定的宽度。
回答by Nitesh
You need a add a widthand a heightof the background image for it to display properly.
您需要添加一个width和一个height背景图像才能正确显示。
For Instance,
例如，
.header-shadow{
background-image: url('../images/header-shade.jpg');
width:xxpx;
height:xxpx;
}
As you mentioned that you are using it as a shadow, the you can remove the widthand add a background-repeat(either vertically or horizontally if required).
正如您提到的，您将它用作阴影，您可以删除width并添加一个background-repeat（如果需要，可以垂直或水平）。
For Instance,
例如，
.header-shadow{
background-image: url('../images/header-shade.jpg');
background-repeat: repeat-y; /* for vertical repeat */
background-repeat: repeat-x; /* for horizontal repeat */
height:xxpx;
}
Hope this helps.
希望这可以帮助。
PS: xx is a dummy value, you need to replace it with your actual values of your image.
PS：xx 是一个虚拟值，您需要将其替换为您图像的实际值。
回答by Ramesh
Give height and width:
给出高度和宽度：
.header-shadow{
background-image: url('../images/header-shade.jpg');
height: 10px;
width: 10px;
}
回答by Hiral
It is happening because .header-shadowis empty.
它正在发生，因为它.header-shadow是空的。
Give heightto it.
给height它。
.header-shadow{
background-image: url('../images/header-shade.jpg');
background-color:red;
height:50px;
}
回答by srinath
Add height & width properties to your .css file.
将高度和宽度属性添加到您的 .css 文件。
回答by Pioneer
To use an image for body background in CSS
在 CSS 中使用图像作为正文背景
body {
background-image: url("image.jpg");
}
回答by Bryan Granse
You can try this also for setting class in div section;
您也可以尝试在 div 部分设置类；
/**CSS**/
.content {
background: url('http://www.gransebryan.com/wp-content/uploads/2016/03/bryan-ganzon-granse-who.png') center no-repeat;
}
.displaybg{
text-align:center;
color:#FFF;
} <div class="content">
<p class="displaybg">This is just a test</p>
</div>回答by Sugumar. V
.content {
background: url('http://www.gransebryan.com/wp-content/uploads/2016/03/bryan-ganzon-granse-who.png') center no-repeat;
}
.displaybg {
text-align:center;
color:#FFF;
}
回答by Bhupendra
<html>
<head>
<style type="text/css"><!--
body{
margin:0px; padding:0px;
}
.wrapper{
margin:0px auto;padding:0px;
width:940px;
background-color:#eee;
background-image: url("images/bg.png");
background-repeat:repeat-y;
padding: 0px 25px 4px 25px;
}
.header{
}
.headerIn{
width: 940px;
margin: 0 auto;
font-size: 14px;
}
.headerP1{
width:940px;
background:url("images/lines_tech.png") repeat;
margin: 0px auto;
height:140px;
}
.container{
width: 940px;
margin: 0 auto;
font-size: 14px;
height:auto;
}
.footer{
width:100%;
background:#eee;
}
.footer {
width: 940px;
margin: 0 auto;
font-size: 12px;
font-family: Georgia,"Times New Roman",Times,serif;
/*background: url("images/footer_bg.png") center bottom no-repeat;*/
}
.mainfooter{
width:990px;
background: url("images/footer_bg.png") no-repeat;
margin-bottom:50px;
margin: 0 auto;
}
.footer .footerContiner {
width: 940px;
margin: 0 auto;
font-size: 11px;
}
#tblbdr table, #tblbdr table td {
border-collapse: collapse;
border: solid 1px #cdcdcd;
padding: 5px 5px;
}
#tblbdr table, #tblbdr table td {
border-collapse: collapse;
border: solid 1px #cdcdcd;
padding: 5px 5px;
}
.input {
padding: 5px 5px;
margin: 0px 0px;
border: solid 1px #dedede;
background-color: #f9f9f9;
font-size: 12px;
}
.tbl{margin: 0 auto;
padding-bottom:3px;
background: url("images/tblbtm.png") repeat-x bottom;
}
.tbl1{
background: url("images/tblright.png") repeat-y right;
padding-right:2px;
}
.button{
background:royalblue;
color:#fff;
border:none;
padding: 5px 7px;
cursor:pointer;
}
ul {
list-style: square outside none;
}
ul li{
display: block;
height: auto;
line-height: 29px;
text-decoration: none;
background-color: #f6f6f6;
padding-left: 30px;
font-family: Verdana;
border-bottom: 1px solid #ebebeb;
background-image: url('images/arrowC.png');
background-repeat: no-repeat;
background-position: left -30px;
}
.DivTab1 {
width: 270px;
height: 199px;
}
.DivTab1 a {
background-image: url('images/nav_bg.jpg');
background-position: 0 0;
float: left;
display: block;
width: 85%;
height: 33px;
line-height: 40px;
padding-left: 40px;
color: #000;
}
.DivTab1 a:hover {
background-image: url('images/nav_bg.jpg');
background-position: left 33px;
float: left;
display: block;
width: 85%;
height: 33px;
line-height: 40px;
padding-left: 40px;
}
--></style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="headerIn">
<div class="headerP1">Header</div>
</div>
</div>
<div class="container" id="tblbdr">
<div class="tblt" style="padding:10px;background:#fff; width:500px;margin:0px auto;">
<table border="0" align="center" cellpadding="0" cellspacing="0" width="500px">
<tr><td>Login</td></tr>
<tr><td><input type="text" class="input" /></td></tr>
<tr><td><input type="text" class="input" /></td></tr>
</table>
</div>
<br /><br />
<div class="tbl">
<div class="tbl1">
<table border="0" style="background:#fff;" align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td style="width: 79px">
State<span style="color: #ff0000">*</span></td>
<td style="width: 183px">
<select name="drpOwnerState" onchange="javascript:setTimeout('__doPostBack(\'drpOwnerState\',\'\')', 0)" id="drpOwnerState" class="input" style="width:173px;">
<option value="NA">Select</option>
<option selected="selected" value="AN">ANDAMAN AND NICOBAR ISLANDS</option>
<option value="AP">ANDHRA PRADESH</option>
<option value="AL">ARUNACHAL PRADESH</option>
</select>
</td>
<td style="width: 65px">
Division<span style="color: #ff0000"></span></td>
<td style="width: 187px">
<select name="drpOwnerDivision" onchange="javascript:setTimeout('__doPostBack(\'drpOwnerDivision\',\'\')', 0)" id="drpOwnerDivision" disabled="disabled" class="input" style="width:173px;">
<option selected="selected" value="NA">Select</option>
</select>
</td>
<td style="width: 56px">
District<span style="color: #ff0000"></span></td>
<td colspan="3">
<select name="drpOwnerDistrict" onchange="javascript:setTimeout('__doPostBack(\'drpOwnerDistrict\',\'\')', 0)" id="drpOwnerDistrict" disabled="disabled" class="input" style="width:173px;">
<option selected="selected" value="NA">Select</option>
</select></td>
</tr>
<tr>
<td colspan="3">
Type any detail about your nearest KIOSK:</td>
<td colspan="5">
<input name="txtSearch" type="text" maxlength="100" id="txtSearch" class="input" style="width:182px;"></td>
</tr>
<tr>
<td align="center" colspan="8" style="height: 23px">
<input type="submit" name="btnsearch" value="Search" onclick="return ListValidation();" id="btnsearch">
<input type="submit" class="button" name="lblExport" value="Export To Excel" id="lblExport"></td>
</tr>
</tbody></table>
</div></div>
<br /><br />
<div class="DivTab1" style="z-index: 750;">
<a href="/Portal/CitizenHome.aspx?servtypeid=1">Applications</a><a href="/Portal/CitizenHome.aspx?servtypeid=2">
Bill Payments</a> <a href="/Portal/CitizenHome.aspx?servtypeid=3">Counseling</a>
<a href="/Portal/CitizenHome.aspx?servtypeid=4">Assessment</a> <a href="/Portal/CitizenHome.aspx?servtypeid=5">
Religious</a> <a href="/Portal/CitizenHome.aspx?servtypeid=6">Reservation</a>
<a href="/Portal/CitizenHome.aspx?servtypeid=7">Universities</a>
</div>
<br /><br />
<div>
<ul>
<li><spn>This is testing code which may be more or less.</span></li>
<li>This is testing code which may be more or less. This is testing code which may be more or less.This is testing code which may be more or less. This is testing code which may be more or less.</li>
<li>This is testing code which may be more or less.</li>
<li>This is testing code which may be more or less.</li>
<li>This is testing code which may be more or less.</li>
</ul>
</div>
</div>
<div class="footer">
<div class="footerContiner">Footer</div>
</div>
</div>
<div class="mainfooter"> </div>
</body>
</html>
