CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rudi Thiel
Rudi Thiel

Reputation: 2551

CSS applied to bootstrap Jumbotron works inline, but not externally

Im trying to apply a background to a jumbotron. It works fine if I use inline styling but not when using an external stylesheet. I have linked the external stylesheet correctly and i can change other attributes of the jumbotron in it but not the background image. Any help would be appreciated. Thanks

html with inline styling: 

        <link rel="stylesheet" href="CSS/bootstrap.min.css">
        <link rel="stylesheet" href="CSS/homepage.css">

        </head>
    <body>

        <div class="jumbotron jumbotron-fluid" style=
             "background-image:url('Images/background.jpg'); background-size:100% 100%">
            <div class="container">
            <h1 class="display-3">Welcome.</h1>
            <p class="lead">Text</p>
            </div>
            <hr class="m-t-2">       
        </div>

        <div id="cardDiv">

        </div>

    </body>
</html>

css: (height works, background image doesnt)

.jumbotron {

    height: 400px;
    background-image: url('Images/background.jpg');
    background-size: 100% 100%;

}

Upvotes: 1

Views: 684

Answers (2)

Sreetam Das
Sreetam Das

Reputation: 3409

One possible fix might be that your file directory isn't configured properly.

As good practice, follow this:

root
|
index.html
<other html files>
CSS Folder/
    |
     <CSS files>
Images Folder/
    |
     <image files>

As for the solution: try this:

.jumbotron {
height: 400px;
background-image: url('../Images/background.jpg');
background-size: 100% 100%;
}

Upvotes: 1

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38807

I imagine your folder structure looks something like the following:

- index.html
- CSS/
    -- homepage.css
    -- bootstrap.min.css
- Images/
    -- background.jpg

The path to the Images/ folder from your HTML file will be different than from within the homepage.css file. You need to use relative paths to get to the Images folder, which should be one level higher. You can use .. to go up one level in the folder structure within the CSS url() property.

CSS

.jumbotron {
    height: 400px;
    background-image: url('../Images/background.jpg');
    background-size: 100% 100%;
}

Upvotes: 1

Related Questions