CODEWITHSUNDEEP
htmlcss
Jericho
Jericho

Reputation: 174

Needed help why background image doesn't show up on the div?

HELP I dont know really what to do, I did review everything on the W3 schools website about CSS and HTML but nothing works. File paths are correct but the background of that div class = "mainBanner" is not functioning.

    <html>
    <head>
    <style>
    * {
    background-color: black;
    margin: 0;
    padding: 0;
    }

    .mainBanner {  
    background-image: url(/images/background.jpg);
    color: #ffffff;
    text-align: center;
    height: 700px;
    }
    </style>
    </head>

    <div class="container mainBanner">
    <h1>Welcome to The Travellers Website</h1>
    <h4>You're all in one solution for perfect travels. Make memories and take          step across 
    islands you've never seen before.</h4>
    </div>
    </html>

<!--Is the background image covered by the * selector when the bg color is applied? This imgae from the .mainBanner class doesnt load even the file is correct-->

Upvotes: 0

Views: 54

Answers (2)

jbutler483
jbutler483

Reputation: 24529

Presuming the image is in the correct location, you are likely receiving issues as you haven't set a height/width of the image itself. You can do this by using background-size

 * {
    background-color: black;
    margin: 0;
    padding: 0;
    }

    .mainBanner {  
    background-image: url(https://i.imgur.com/7a4DOBA.jpg);
    background-size:100% 100%;
    color: #ffffff;
    text-align: center;
    height: 700px;
    }
<html>
    <div class="container mainBanner">
    <h1>Welcome to The Travellers Website</h1>
    <h4>You're all in one solution for perfect travels. Make memories and take          step across 
    islands you've never seen before.</h4>
    </div>
    </html>

<!--Is the background image covered by the * selector when the bg color is applied? This imgae from the .mainBanner class doesnt load even the file is correct-->

Is the background image covered by the * selector when the bg color is applied? This imgae from the .mainBanner class doesnt load even the file is correct

As .mainBanner is more specific than *, css specified under the .mainBanner will take precedence.

Upvotes: 1

S.R Keshav
S.R Keshav

Reputation: 2073

background: url(/images/background.jpg) center no-repeat ;

Upvotes: 0

Related Questions