web-dev-qa-db-fra.com

Ajouter une image de fond à div en utilisant css?

J'ai essayé d'ajouter une image d'arrière-plan à une classe div en utilisant css. mais sans succès.

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

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

Information additionnelle:

C'est une image avec une ombre et je l'utilise en haut du site, elle ne doit donc pas avoir une largeur particulière.

csshtmlbackground-image
43
Orahmax

Vous devez ajouter une width et une height de l’image d’arrière-plan pour qu’elle s’affiche correctement.

Par exemple, 

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

Lorsque vous avez indiqué que vous l'utilisiez comme une ombre, vous pouvez supprimer la width et ajouter un background-repeat (verticalement ou horizontalement si nécessaire).

Par exemple, 

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

J'espère que cela t'aides.

PS: xx est une valeur factice, vous devez la remplacer par les valeurs réelles de votre image.

52
Nitesh

Donne hauteur et largeur:

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

Cela se produit parce que .header-shadow est vide.

Donnez-lui height.

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

Fiddle ici.

2
Hiral

Ajoutez des propriétés height et width à votre fichier .css.

1
srinath

Utiliser une image pour le fond du corps en CSS 

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

Vous pouvez aussi essayer ceci pour définir la classe dans la 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>

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