L'ajout d'image d'arrière-plan à la div à l'aide de css?

J'ai essayé d'ajouter un arrière-plan de l'image dans un div de classe à l'aide de css. mais n'ont pas de 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');
}

Informations supplémentaires:

C'est une image avec l'ombre et je suis à l'utiliser au-dessus du site web, de sorte qu'il ne doit pas avoir un particulier de la largeur.

  • Il n'y a pas de contenu dans la <div>, de sorte que peut avoir une hauteur de 0, ce qui signifie que vous ne pouvez pas le voir.
InformationsquelleAutor Orahmax | 2013-11-19
  1. 52

    Vous avez besoin d'un ajout d'un width et un height de l'image de fond pour qu'il puisse s'afficher correctement.

    Par Exemple,

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

    Comme vous l'avez mentionné que vous l'utilisez comme une ombre, vous pouvez supprimer le width et ajouter un background-repeat (à la verticale ou à l'horizontale, 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;
}

    Espère que cette aide.

    PS: xx est une valeur factice, vous devez le remplacer avec vos valeurs réelles de votre image.

    • Comment gérer le ratio d'aspect de l'image est redimensionnée? Il semble que l'image n'est pas affichée, mais seulement ème div lorsqu'elle est redimensionnée.
    • Utilisation background-size propriété pour obtenir la même chose. Vous pouvez en lire plus à propos de la même chose que ci-dessous w3.org/TR/2002/WD-css3-background-20020802/#background-size - @aspirant
    • il ne peut pas être l'espace entre 'url' et '('
    • Il n'a pas d'importance.
    • J'ai demandé qu'avant, sans succès.
    • Bien sûr, j'ai été pointilleux sur l ' "image" de comportement
    • Est-il solution de l'utiliser sans une certaine hauteur ? Pour être sur à 100% et de répondre à la place de l'image ?

    InformationsquelleAutor Nitesh
  2. 10

    Donner de la hauteur et de la largeur:

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

    Il se passe parce que .header-shadow est vide.

    Donner height à elle.

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

    Violon ici.

    • Accord - @Hiral
    • Il n'y a pas d'image, la couleur est bien, mais quand vous enlevez la couleur, il n'y a pas d'image, 🙁
    InformationsquelleAutor Hiral
  4. 1

    Ajouter de la hauteur & largeur des propriétés à votre .fichier css.

    InformationsquelleAutor srinath
  5. 1

    Vous pouvez l'essayer aussi pour la définition de la classe dans le div de la section;

    CSS:

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



   
}

    HTML:

     <div class="content">
      
      <p class="displaybg">This is just a test</p>
      
     </div>

    InformationsquelleAutor Bryan Granse
  6. 1

    Pour utiliser une image pour le corps de fond en CSS

    body {
  background-image: url("image.jpg");
}
    InformationsquelleAutor Pioneer
  7. 0
    <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>
    InformationsquelleAutor Bhupendra
  8. 0
    .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;
}
    InformationsquelleAutor Sugumar. V