CODEWITHSUNDEEP
htmlbackground
moosepp
moosepp

Reputation: 1

Background Image not applying to div

I'm trying to get my conatiner.png transparent background to apply to my "indexbar" div, but it just simply won't show. It works on my main container, I'm doing it the same way in my style.css but it won't apply.

index.html:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Reapers Overpoch Store</title>
</head>

<body>
<center>
  <div class="banner"><img src="images/banner.png" width="1000" height="400"></div>
  <div class="indexbar"><p style="color: #FFF; font-size: 24px">Loadouts | Crates | Buildings | Vehicles & Insurance | Misc</p></div>
<div class="container">
  <div class="content">
    <h2 style="color: #FFF">Welcome to the Reapers Overpoch Store!</h2>
    <p style="color: #FFF">This is where you will find all the donator perks for the Reapers Midnight Recon DayZ servers! All payments are final and specified items will be charged monthly if not cancelled! All items are always up to date and include full details along with pictures.</p>
    <p style="color: #FFF"><strong>How to Donate:</strong> If you would like to purchase an item, then click the <strong><i>Buy Now</i></strong> or <strong><i>Donate</i></strong> button associated with it and continue via PayPal.</p>
    <p style="color: #FFF"><strong>Delivery Notice:</strong> We do our best to get your items either applied to your character, or added in-game as soon as possible. If there are any delays, it due to unavailability of an admin or coder.</p>
  </div>
</div>
</center>
</body>

</html>

style.css:

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-image: url("images/background.jpg");
    background-size: cover;
    background-attachment: fixed;
    margin: 80;
    padding: 0;
    color: #000;
}

ul, ol, dl {
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px;
}
a img {
    border: none;
}

a:link {
    color: #42413C;
    text-decoration: underline;
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    text-decoration: none;
    font-weight: normal;
}

.container {
    width: 1000px;
    background-image: url("images/container.png");
    margin: 0 auto;
}

.content {
    padding: 10px;
    font-weight: normal;
    margin: 10px;
}
.banner {
    height: 400px;
    width: 1000px;
    margin: 10px;
}


.fltrt {
    float: right;
    margin-left: 8px;
}
.fltlft {
    float: left;
    margin-right: 8px;
}
.clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;

.container .content p em {
    font-size: 50%;
}
.container .content p {


}
.banner {
    margin: 10px;
    height: 400px;
    width: 1000px;
}
.indexbar {
    background-image: url(images/container.png);
    margin: 10px;
    height: 50px;
    width: 1000px;
    padding: 10px;
}

Thanks in advance.

Upvotes: 0

Views: 76

Answers (2)

Maze Runner
Maze Runner

Reputation: 244

The only difference I see is that you dont have quotes in but that not usually a problem for me

background-image: url(images/container.png);

Upvotes: 0

taxicala
taxicala

Reputation: 21759

You are missing the quotes:

.indexbar {
    background-image: url(images/container.png);
    margin: 10px;
    height: 50px;
    width: 1000px;
    padding: 10px;
}

Should be:

.indexbar {
    background-image: url("images/container.png");
    margin: 10px;
    height: 50px;
    width: 1000px;
    padding: 10px;
}

Upvotes: 1

Related Questions