CODEWITHSUNDEEP
htmlcss
Johannes Getzner
Johannes Getzner

Reputation: 61

Why can't i set the backgroundimage?

I just started coding and i am building a Website with bootstrap. I want to create a simple Container (id="test") with a background image. I don't know why but i just does not set the background image and i am out of ideas. I am also using external CSS. I just found out that the collapse button is not working. Please help me fix those two Problems.

greetings,

Johannes Getzner

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">   </script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>FirstWebsite</title>

</head>

<body>
<div id="wrapper">
    <div class="navbar navbar-default">
        <div id="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="brand" class="navbar-brand">Example</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul id="listleft" class="nav navbar-nav navbar-left">
                    <li><a href="#Home">Home</a></li>
                    <li><a href="#About">About</a></li>
                </ul>
                <ul id="listright" class="nav navbar-nav navbar-right">
                    <li><a href="#Contact">Contact</a></li>
                    <li><a href="#Blog">Blog</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="test">

    </div>
</div>
</body>
</html>

CSS

#brand{
font-size: 300%;
}
.navbar-brand{
position:absolute; 
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
#listleft{
margin-left: 20%;
}
#listright{
margin-right: 20%;
}

ul li{
font-size: 100%;
}

#test{background-image: url("background2.jpg");

 }

Upvotes: 1

Views: 57

Answers (3)

Mr Lister
Mr Lister

Reputation: 46539

The div with id="test" doesn't have any content; therefore it doesn't have a height. So whatever background you give it won't show up.

Solution: give the div a height in the css.

#test {
  background-image: url("background2.jpg");
  height: 100px; /* or whatever */
}

(or, put something in the div, like text or something.)

Upvotes: 2

wesww
wesww

Reputation: 2873

Your css looks like it might be ok, but doesn't look like you're setting a height or width on that empty div. Probably you're getting a 0px by 0px empty div with the background of your image

Upvotes: 2

Alex
Alex

Reputation: 8695

Change the order of style links in head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">   </script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>

Upvotes: 0

Related Questions