Adding background image to div using css?

2019-01-31 11:56发布

站内问答 / HTML/CSS
1228 8 5

I have been trying to add background image to a div class using css. but have no success.

HTML code:-

<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:-

.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.

8条回答
ら.Afraid
2楼-- · 2019-01-31 11:58

It is happening because .header-shadow is empty.

Give height to it.

.header-shadow{
    background-image: url('../images/header-shade.jpg');
    background-color:red;
    height:50px;
}

Fiddle here.

查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
3楼-- · 2019-01-31 12:02

To use an image for body background in CSS

body {
  background-image: url("image.jpg");
}
查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
4楼-- · 2019-01-31 12:03 
.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;
}
查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
5楼-- · 2019-01-31 12:09

You can try this also for setting class in div section;

/**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>

查看更多
0人赞 添加讨论(0) 举报
聊天终结者
6楼-- · 2019-01-31 12:10

Add height & width properties to your .css file.

查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
7楼-- · 2019-01-31 12:12 
<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">&nbsp;</div>    
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)