CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Artanor
Artanor

Reputation: 103

Setting background-image for bootstrap's container from .css file

I have a problem with setting background image for bootstrap's container from .css file.

Let's say..

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Background</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <header>
    <div id="header">
        <div class="container">
            <div class="row">
                <div class ="col-xs-6" id="logo">
                    <img src="images/logo_png.png" alt="logo">
                </div>
                <div class ="col-xs-6" id="menu">
                    <nav id="menu_nav">
                        <ul id="menu_nav_ul">
                            <li><a href="#">ABOUT</a></li>
                            <li><a href="#">HOW IT WORKS</a></li>
                            <li><a href="#">SERVICES</a></li>
                            <li><a href="#">FAQ</a></li>
                            <li><a href="#">CONTACT</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>

</body>
</html>

And CSS:

#header{
    background-image: url('../images/banner_header.jpg');
    width: 1598px;
    height: 888px;
    background-size: cover;
}

It's not working, I don't know why.

When I'm trying to do it directly from .html file it works fine, like:

<div id="header" style="background-image: url('images/banner_header.jpg');">

Please help.

Upvotes: 2

Views: 20223

Answers (2)

lukast94
lukast94

Reputation: 23

It seems to work for me.

background-image: url('../images/banner_header.jpg');

Project setup

> Project
   index.html
 > images
   banner_header.jpg
 > style
   style.css

Something must be wrong within your project folder. Maybe wrong name, missing file. Check if your style.css is in your style folder. Just setup your folder as I did above, and it should work.

Upvotes: 0

Pavan Baddi
Pavan Baddi

Reputation: 479

I have copied pasted same code you have pasted. But the background image #header class in css class

WORKS FINE.

Here is the code you can copy:

File HTML : 

    <!DOCTYPE html>
<html>
<head>
<title>Background</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <header>
    <div id="header">
        <div class="container">
            <div class="row">
                <div class ="col-xs-6" id="logo">
                    <img src="images/logo_png.png" alt="logo">
                </div>
                <div class ="col-xs-6" id="menu">
                    <nav id="menu_nav">
                        <ul id="menu_nav_ul">
                            <li><a href="#">ABOUT</a></li>
                            <li><a href="#">HOW IT WORKS</a></li>
                            <li><a href="#">SERVICES</a></li>
                            <li><a href="#">FAQ</a></li>
                            <li><a href="#">CONTACT</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>

</body>
</html>

CSS FILE style.css inside folder style

#header{
    background-image: url('../images/trolltunga.jpg');
    width: 100%;
    height: auto;
    background-size: cover;
}

`

Upvotes: 1

Related Questions