CODEWITHSUNDEEP
htmlcss
Muhammad Ali
Muhammad Ali

Reputation: 119

background image not displaying inside div

Trying to make a landing page at work. For some reason a background image isnt displaying here is the relevant html and css. 

<div class="jumbotron">
    <div class="top-bar">

        <div class="top-bar-left"><img src="img/AzlanLogo.png"></div>
        <div class="top-bar-right"><img src="img/MicrosoftLogo.png"></div>

    </div>

    <div class="header-container">
    <div class="header-left"></div>

    <div class="header-right"><p><a class="btn btn-primary btn-lg" href="#" role="button">Download file</a></p>
        <p><a class="btn btn-primary btn-lg right" href="#" role="button">E-mail to friend</a></p></div>
    </div>

</div>

and the CSS

.header-container {
    background-image: url('img/bg-header.png');
    height: 229px;
    width: 1013px;
    margin: 0px auto;

}

.header-left {
    width: 30%;
    float: left;
}

.header-right {
    width: 70%;
    float: right;
}

checked in google dev tools and the image url is correct. Though, i cant figure out why the image doesnt display ?

Hope that gives sufficient information for an answer.

Upvotes: 0

Views: 116

Answers (2)

Richard Howell
Richard Howell

Reputation: 359

When I link to my own asset your code seems to work.

It is more than likely your path to the asset is incorrect, try adding the full domain to the rule:

background-image: url('http://www.yourdomainhere.com/img/bg-header.png');

If that doesn't work post the <head> contents for debugging.

Upvotes: 1

Tanasos
Tanasos

Reputation: 4098

If the code You have provided is online, stored on a web hosting or being edited locally on a XAMPP/MAMP etc. server, your image path should be as follows:

NOTE: This is meant to be applied in your HTML. In CSS, your current default url() should be working just fine.

<img src="../img/AzlanLogo.png">

The ../ before img/AzlanLogo.png tells the browser to go back and search in the main directory for your img folder, then find the specified file.

Upvotes: 1

Related Questions