Adding background image to div using CSS

Question

I have been trying to add background image to a div class using CSS, but I didn't have any success.

HTML code:

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

Additional information:

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.

There's no content in the `
`, so may have a height of 0, meaning you can't see it. — davidpauljunior, Nov 19 '13 at 06:23

score 69 · Accepted Answer · edited Aug 21 '20 at 19:07

69

You need to add a width and a height of the background image for it to display properly.

For instance,

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

As you mentioned that you are using it as a shadow, you can remove the width and add a background-repeat (either vertically or horizontally if required).

For instance,

.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 is a dummy value. You need to replace it with your actual values of your image.

edited Aug 21 '20 at 19:07

Peter Mortensen

30,738
21
105
131

answered Nov 19 '13 at 06:24

Nitesh

15,425
4
48
60

1

How to manage the aspect ratio of the image as it's resized? It seems image is not shown but only th div when it's resized. – aspiring May 19 '15 at 02:38
Use `background-size` property to achieve the same. You can read more about the same as below http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size - @aspiring – Nitesh May 19 '15 at 05:02
there can't be whitespace between 'url' and '(' – andrej Oct 14 '15 at 12:12
@andrej - It doesn't matter. – Nitesh Oct 28 '15 at 13:32
Is there any solution to use it without a particular height ? To be 100% and accommodate to the place the image have ? – Martin Irigaray Jun 05 '19 at 15:19

score 14 · Answer 2 · edited Aug 21 '20 at 19:08

14

Specify a height and a width:

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

edited Aug 21 '20 at 19:08

Peter Mortensen

30,738
21
105
131

answered Nov 19 '13 at 06:24

Ramesh

4,223
2
16
24

score 2 · Answer 3 · edited Aug 21 '20 at 19:09

2

It is happening because .header-shadow is empty.

Add height to it:

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

Fiddle here.

edited Aug 21 '20 at 19:09

Peter Mortensen

30,738
21
105
131

answered Nov 19 '13 at 06:24

codingrose

15,563
11
39
58

[Agreed - @Hiral](http://stackoverflow.com/questions/20064596/adding-background-image-to-div-using-css/20064619#20064619) – Nitesh Nov 19 '13 at 06:26
There is no image, color is fine, but when you remove color, there is no image, :( – Incredible Feb 09 '16 at 09:59

score 1 · Answer 4 · answered Nov 19 '13 at 06:35

1

Add height & width properties to your .css file.

answered Nov 19 '13 at 06:35

srinath

9
4

score 1 · Answer 5 · edited Jun 02 '16 at 08:16

1

To use an image for body background in CSS

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

edited Jun 02 '16 at 08:16

juco

6,331
3
25
42

answered Nov 27 '14 at 13:33

Pioneer

27
1

score 1 · Answer 6 · edited Aug 21 '20 at 19:10

1

You can try this also for setting the class in a div section:

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

edited Aug 21 '20 at 19:10

Peter Mortensen

30,738
21
105
131

answered Apr 09 '16 at 08:18

Bryan Granse

11
2

score 0 · Answer 7 · edited Aug 21 '20 at 19:11

0

Use:

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

edited Aug 21 '20 at 19:11

Peter Mortensen

30,738
21
105
131

answered Jul 10 '17 at 10:55

Sugumar. V

9
1

An explanation would be in order. – Peter Mortensen Aug 21 '20 at 19:12

score -2 · Answer 8 · edited Aug 21 '20 at 19:23

<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 .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("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="footerContainer">Footer</div>
            </div>
        </div>

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

    </body>

</html>

An explanation would be in order. – Peter Mortensen Aug 21 '20 at 19:20 — Peter Mortensen, Aug 21 '20 at 19:20
... And it looks like overkill for a simple question – Robert Perry Aug 28 '20 at 11:45 — Robert Perry, Aug 28 '20 at 11:45

Adding background image to div using CSS

8 Answers8

Linked