Подтвердить что ты не робот

Добавление фонового изображения в div с помощью css?

Я пытаюсь добавить фоновое изображение в div-класс, используя css. но не имеют успеха.

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

Дополнительная информация:

Это изображение с тенью, и я использую его в верхней части веб-сайта, поэтому он не должен иметь определенную ширину.

4b9b3361

ОТВЕТЫ

Ответ 1

Вам нужно добавить width и height фонового изображения, чтобы он отображался правильно.

Для экземпляра

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

Как вы уже упоминали, что вы используете его как тень, вы можете удалить width и добавить background-repeat (по вертикали или по горизонтали, если требуется).

Для экземпляра

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

Надеюсь, что это поможет.

PS: xx - это фиктивное значение, вам нужно заменить его на фактические значения вашего изображения.

Ответ 2

Укажите высоту и ширину:

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

Ответ 3

Это происходит потому, что .header-shadow пуст.

Отдайте height.

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

Скрипт здесь.

Ответ 4

Добавьте свойства высоты и ширины в ваш .css файл.

Ответ 5

Использовать изображение для фона тела в CSS

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

Ответ 6

Вы можете попробовать это также для установки класса в разделе 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>

Ответ 7

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

Ответ 8

http://picocurl.com/10pw

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