blocks|key|194831|text|指定高度和宽度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|194832|.header-shadow{
++++background-image:+url('../images/header-shade.jpg');
++++height:+10px;
++++width:+10px;
}|code-block|syntax|javascript|194833|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Specify a height and a width:</p>
<pre><code>.header-shadow{
    background-image: url('../images/header-shade.jpg');
    height: 10px;
    width: 10px;
}
</code></pre>


blocks|key|4700769|text|向.css文件添加高度和宽度属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4700770|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Add height &amp; width properties to your .css file.</p>


blocks|key|4700778|text|<html>
++++<head>
++++++++<style+type="text/css"></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%25">
++++++++++++++++++++<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="footerContainer">Footer</div>
++++++++++++</div>
++++++++</div>

++++++++<div+class="mainfooter">&nbsp;</div>

++++</body>

</html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4700779|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;style type=&quot;text/css&quot;&gt;&lt;!--
            body {
                margin: 0px;
                padding: 0px;
            }

            .wrapper {
                margin: 0px auto;
                padding: 0px;
                width: 940px;
                background-color: #EEE;
                background-image: url(&quot;images/bg.png&quot;);
                background-repeat: repeat-y;
                padding: 0px 25px 4px 25px;
            }

            .header {

            }

            .headerIn {
                width: 940px;
                margin: 0 auto;
                font-size: 14px;
            }

            .headerP1 {
                width: 940px;
                background: url(&quot;images/lines_tech.png&quot;) 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, &quot;Times New Roman&quot;, Times, serif;
                /* background: url(&quot;images/footer_bg.png&quot;) center bottom no-repeat; */
            }

            .mainfooter {
                width: 990px;
                background: url(&quot;images/footer_bg.png&quot;) no-repeat;
                margin-bottom: 50px;
                margin: 0 auto;
            }

            .footer .footerContainer {
                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(&quot;images/tblbtm.png&quot;) repeat-x bottom;
            }

            .tbl1 {
                background: url(&quot;images/tblright.png&quot;) 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;
            }
        --&gt;&lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;div class=&quot;wrapper&quot;&gt;
            &lt;div class=&quot;header&quot;&gt;
                &lt;div class=&quot;headerIn&quot;&gt;
                    &lt;div class=&quot;headerP1&quot;&gt;Header&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;container&quot; id=&quot;tblbdr&quot;&gt;
                &lt;div class=&quot;tblt&quot; style=&quot;padding:10px;background:#fff; width:500px;margin:0px auto;&quot;&gt;
                    &lt;table border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;500px&quot;&gt;
                        &lt;tr&gt;&lt;td&gt;Login&lt;/td&gt;&lt;/tr&gt;
                        &lt;tr&gt;&lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;input&quot;  /&gt;&lt;/td&gt;&lt;/tr&gt;
                        &lt;tr&gt;&lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;input&quot;  /&gt;&lt;/td&gt;&lt;/tr&gt;
                    &lt;/table&gt;
                &lt;/div&gt;

                &lt;br /&gt;&lt;br /&gt;

                &lt;div class=&quot;tbl&quot;&gt;
                &lt;div class=&quot;tbl1&quot;&gt;
                &lt;table border=&quot;0&quot; style=&quot;background:#fff;&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;
                    &lt;tbody&gt;&lt;tr&gt;
                        &lt;td style=&quot;width: 79px&quot;&gt;
                            State&lt;span style=&quot;color: #ff0000&quot;&gt;*&lt;/span&gt;&lt;/td&gt;
                        &lt;td style=&quot;width: 183px&quot;&gt;
                            &lt;select name=&quot;drpOwnerState&quot; onchange=&quot;javascript:setTimeout('__doPostBack(\'drpOwnerState\',\'\')', 0)&quot; id=&quot;drpOwnerState&quot; class=&quot;input&quot; style=&quot;width:173px;&quot;&gt;
                                &lt;option value=&quot;NA&quot;&gt;Select&lt;/option&gt;
                                &lt;option selected=&quot;selected&quot; value=&quot;AN&quot;&gt;ANDAMAN AND NICOBAR ISLANDS&lt;/option&gt;
                                &lt;option value=&quot;AP&quot;&gt;ANDHRA PRADESH&lt;/option&gt;
                                &lt;option value=&quot;AL&quot;&gt;ARUNACHAL PRADESH&lt;/option&gt;
                            &lt;/select&gt;
                        &lt;/td&gt;
                        &lt;td style=&quot;width: 65px&quot;&gt;
                            Division&lt;span style=&quot;color: #ff0000&quot;&gt;&lt;/span&gt;&lt;/td&gt;
                        &lt;td style=&quot;width: 187px&quot;&gt;
                            &lt;select name=&quot;drpOwnerDivision&quot; onchange=&quot;javascript:setTimeout('__doPostBack(\'drpOwnerDivision\',\'\')', 0)&quot; id=&quot;drpOwnerDivision&quot; disabled=&quot;disabled&quot; class=&quot;input&quot; style=&quot;width:173px;&quot;&gt;
                                &lt;option selected=&quot;selected&quot; value=&quot;NA&quot;&gt;Select&lt;/option&gt;

                            &lt;/select&gt;
                        &lt;/td&gt;
                        &lt;td style=&quot;width: 56px&quot;&gt;
                            District&lt;span style=&quot;color: #ff0000&quot;&gt;&lt;/span&gt;&lt;/td&gt;
                        &lt;td colspan=&quot;3&quot;&gt;
                            &lt;select name=&quot;drpOwnerDistrict&quot; onchange=&quot;javascript:setTimeout('__doPostBack(\'drpOwnerDistrict\',\'\')', 0)&quot; id=&quot;drpOwnerDistrict&quot; disabled=&quot;disabled&quot; class=&quot;input&quot; style=&quot;width:173px;&quot;&gt;
                                &lt;option selected=&quot;selected&quot; value=&quot;NA&quot;&gt;Select&lt;/option&gt;
                            &lt;/select&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td colspan=&quot;3&quot;&gt;
                            Type any detail about your nearest KIOSK:&lt;/td&gt;
                        &lt;td colspan=&quot;5&quot;&gt;
                            &lt;input name=&quot;txtSearch&quot; type=&quot;text&quot; maxlength=&quot;100&quot; id=&quot;txtSearch&quot; class=&quot;input&quot; style=&quot;width:182px;&quot;&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td align=&quot;center&quot; colspan=&quot;8&quot; style=&quot;height: 23px&quot;&gt;
                            &lt;input type=&quot;submit&quot; name=&quot;btnsearch&quot; value=&quot;Search&quot; onclick=&quot;return ListValidation();&quot; id=&quot;btnsearch&quot;&gt;

                            &lt;input type=&quot;submit&quot; class=&quot;button&quot; name=&quot;lblExport&quot; value=&quot;Export To Excel&quot; id=&quot;lblExport&quot;&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;br /&gt;&lt;br /&gt;
        &lt;div class=&quot;DivTab1&quot; style=&quot;z-index: 750;&quot;&gt;
            &lt;a href=&quot;/Portal/CitizenHome.aspx?servtypeid=1&quot;&gt;Applications&lt;/a&gt;&lt;a href=&quot;/Portal/CitizenHome.aspx?servtypeid=2&quot;&gt;
                Bill Payments&lt;/a&gt; &lt;a href=&quot;/Portal/CitizenHome.aspx?servtypeid=3&quot;&gt;Counseling&lt;/a&gt;
            &lt;a href=&quot;/Portal/CitizenHome.aspx?servtypeid=4&quot;&gt;Assessment&lt;/a&gt; &lt;a href=&quot;/Portal/CitizenHome.aspx?servtypeid=5&quot;&gt;
                Religious&lt;/a&gt; &lt;a href=&quot;/Portal/CitizenHome.aspx?servtypeid=6&quot;&gt;Reservation&lt;/a&gt;
            &lt;a href=&quot;/Portal/CitizenHome.aspx?servtypeid=7&quot;&gt;Universities&lt;/a&gt;
        &lt;/div&gt;

        &lt;br /&gt;&lt;br /&gt;

        &lt;div&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;spn&gt;This is testing code which may be more or less.&lt;/span&gt;&lt;/li&gt;
                &lt;li&gt;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.&lt;/li&gt;
                &lt;li&gt;This is testing code which may be more or less.&lt;/li&gt;
                &lt;li&gt;This is testing code which may be more or less.&lt;/li&gt;
                &lt;li&gt;This is testing code which may be more or less.&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

        &lt;/div&gt;


        &lt;div class=&quot;footer&quot;&gt;

            &lt;div class=&quot;footerContainer&quot;&gt;Footer&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;mainfooter&quot;&gt;&amp;nbsp;&lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre>


blocks|key|4700818|text|您还可以尝试在div部分中设置类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4700819|​|4700820|/**+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;
}|code-block|syntax|javascript|4700821|<div+class="content">

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

</div>|4700822|4700823|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You can try this also for setting the class in a div section:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/** 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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;

    &lt;p class="displaybg"&gt;This is just a test&lt;/p&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4700844|text|使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4700845|.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;
}|code-block|syntax|javascript|4700846|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use:</p>
<pre><code>.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;
}
</code></pre>


<p>I have been trying to add background image to a div class using CSS, but I didn't have any success.</p>
<p>HTML code:</p>
<pre><code>&lt;header id=&quot;masthead&quot; class=&quot;site-header&quot; role=&quot;banner&quot;&gt;
    &lt;div class=&quot;header-shadow&quot;&gt;&lt;/div&gt;
        &lt;hgroup&gt;&lt;/hgroup&gt;
        &lt;nav role=&quot;navigation&quot; class=&quot;site-navigation main-navigation&quot;&gt;

        &lt;/nav&gt;&lt;!-- .site-navigation .main-navigation --&gt;
&lt;/header&gt;&lt;!-- #masthead .site-header --&gt;
</code></pre>
<p>CSS:</p>
<pre><code>.header-shadow{
    background-image: url('../images/header-shade.jpg');
}
</code></pre>
<p>Additional information:</p>
<p>This is an image with a shadow and I am using it at the top of the website, so it mustn't have a particular width.</p>


Adding background image to div using CSS

我一直在尝试使用CSS将背景图片添加到div类中，但没有成功。HTML代码：<header id="masthead" class="site-header" role="banner">    <div class="header-shadow"></div>        <hgroup></hgroup>    ...

问使用CSS将背景图像添加到div
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS将背景图像添加到divEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS将背景图像添加到div
EN