Adding background image to div using CSS

CssHtmlBackground Image

Css Problem Overview

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.

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

Specify a height and a width:

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

Solution 3 - Css

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.

Solution 4 - Css

Add height & width properties to your .css file.

Solution 5 - Css

To use an image for body background in CSS

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

Solution 6 - Css

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>

Solution 7 - Css

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

Solution 8 - Css

<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>
Categories
Recommended Css Solutions
Recommended Html Solutions
Recommended Background Image Solutions

Previous Solution:

How to judge a string is UUID type?

Java

Next Solution:

Changing the space between each item in Bootstrap navbar

HtmlCssTwitter BootstrapNavbar

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionOrahmaxView Question on Stackoverflow
Solution 1 - CssNiteshView Answer on Stackoverflow
Solution 2 - CssRameshView Answer on Stackoverflow
Solution 3 - CsscodingroseView Answer on Stackoverflow
Solution 4 - CsssrinathView Answer on Stackoverflow
Solution 5 - CssPioneerView Answer on Stackoverflow
Solution 6 - CssBryan GranseView Answer on Stackoverflow
Solution 7 - CssSugumar. VView Answer on Stackoverflow
Solution 8 - CssBhupendraView Answer on Stackoverflow