it-swarm.com.de

Hinzufügen von Hintergrundbild zu div mithilfe von css?

Ich habe versucht, ein Hintergrundbild zu einer Div-Klasse mit css hinzuzufügen. aber keinen erfolg haben.

HTML Quelltext:-

<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');
}

Zusätzliche Information:

Dies ist ein Bild mit Schatten und ich verwende es oben auf der Website. Es darf also keine bestimmte Breite haben.

43
Orahmax

Sie müssen eine width und eine height des Hintergrundbildes hinzufügen, damit es korrekt angezeigt wird.

Zum Beispiel,

.header-shadow{
    background-image: url('../images/header-shade.jpg');
    width:xxpx;
    height:xxpx;
}

Wie Sie erwähnt haben, dass Sie es als Schatten verwenden, können Sie die width entfernen und einen background-repeat hinzufügen (entweder vertikal oder horizontal, falls erforderlich).

Zum Beispiel,

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

Hoffe das hilft.

PS: xx ist ein Scheinwert, den Sie durch Ihre tatsächlichen Werte Ihres Bildes ersetzen müssen.

52
Nitesh

Höhe und Breite angeben:

.header-shadow{
    background-image: url('../images/header-shade.jpg');
    height: 10px;
    width: 10px;
}
10
Ramesh

Dies geschieht, weil .header-shadow leer ist.

Geben Sie height an.

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

Fiddle hier.

2
Hiral

Fügen Sie Ihrer .css-Datei die Eigenschaften height & width hinzu.

1
srinath

So verwenden Sie ein Bild für den Körperhintergrund in CSS

body {
  background-image: url("image.jpg");
}
1
Pioneer

Sie können dies auch zum Einstellen der Klasse im Div-Abschnitt versuchen.

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

1
Bryan Granse
.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
Sugumar. V
<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
Bhupendra