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 <div>, so may have a height of 0, meaning you can't see it. — davidpauljunior
– davidpauljunior, Commented Nov 19, 2013 at 6:23

Peter Mortensen · Accepted Answer · 2020-08-21 19:07:46Z

71

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, 2020 at 19:07

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 19, 2013 at 6:24

Nitesh

15.8k4 gold badges51 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

aspiring Over a year ago

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.

Nitesh Over a year ago

Use background-size property to achieve the same. You can read more about the same as below w3.org/TR/2002/WD-css3-background-20020802/#background-size - @aspiring

andrej Over a year ago

there can't be whitespace between 'url' and '('

Nitesh Over a year ago

@andrej - It doesn't matter.

Martin Irigaray Over a year ago

Is there any solution to use it without a particular height ? To be 100% and accommodate to the place the image have ?

Peter Mortensen · Accepted Answer · 2020-08-21 19:08:36Z

14

Specify a height and a width:

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

edited Aug 21, 2020 at 19:08

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 19, 2013 at 6:24

Ramesh

4,3032 gold badges20 silver badges24 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2020-08-21 19:09:26Z

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, 2020 at 19:09

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 19, 2013 at 6:24

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

2 Comments

Nitesh Over a year ago

Agreed - @Hiral

Iti Tyagi Over a year ago

There is no image, color is fine, but when you remove color, there is no image, :(

srinath · Accepted Answer · 2013-11-19 06:35:17Z

1

Add height & width properties to your .css file.

answered Nov 19, 2013 at 6:35

srinath

94 bronze badges

Comments

juco · Accepted Answer · 2016-06-02 08:16:22Z

1

To use an image for body background in CSS

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

edited Jun 2, 2016 at 8:16

juco

6,3423 gold badges27 silver badges42 bronze badges

answered Nov 27, 2014 at 13:33

Pioneer

271 bronze badge

Comments

Peter Mortensen · Accepted Answer · 2020-08-21 19:10:50Z

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, 2020 at 19:10

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 9, 2016 at 8:18

Bryan Granse

112 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2020-08-21 19:11:43Z

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, 2020 at 19:11

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 10, 2017 at 10:55

Sugumar. V

91 bronze badge

1 Comment

Peter Mortensen Over a year ago

An explanation would be in order.

Mufarrij Almutairy · Accepted Answer · 2025-03-18 08:13:11Z

-1

.BgDivClass{
width:160px;
height:160px;
background-image: url('https://www2.0zz0.com/2025/03/18/07/615680095.png');

<!DOCTYPE html>
<html>
<head>
<style>
.BgDivClass{
width:160px;
height:160px;
background-image: url('https://www2.0zz0.com/2025/03/18/07/615680095.png');
}
</style>
</head>
<body>

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div style=" width:160px; height:160px; background-image: url('https://www2.0zz0.com/2025/03/18/07/615680095.png')" ></div>

<br>

<div class="BgDivClass"></div>

</body>
</html>

<!--
You can include this code in an external file and import it into an HTML file by:
<link rel="stylesheet" href="cssFile.css">
Or include it inside an HTML file, as shown here
Or include it inside an Attribute in a Div tag.
by Mufarrij Almutairi KSA Majmaah City . 
 -->

</body>
</html>

answered Mar 18 at 8:13

Mufarrij Almutairy

11 bronze badge

1 Comment

Xgongiveittoya Mar 19 at 14:58

This would me more useful if it could explain what it does as why it's a novel answer to this question.

Peter Mortensen · Accepted Answer · 2020-08-21 19:23:48Z

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

Collectives™ on Stack Overflow

Adding background image to div using CSS

9 Answers 9

5 Comments

Comments

2 Comments

Comments

Comments

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

Comments

2 Comments

Comments

Comments

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related