CODEWITHSUNDEEP
htmlcss
user2726883
user2726883

Reputation: 161

Background Image won't show on IE 8

The background image in class 'Logo' won't show on IE8. After looking around in stackoverflow, I tried changed the image to PNG format. It still won't show.

Here is the basic structure of my divs.

<header>
     <div class="headcontain">
          <div class="logo">
                <div class="nav2"></div>
                <div class="fbmainlike"></div>
          </div>
     </div>
</header>

Here's the CSS 

.header {
    background-color: #2B2B2B;
    width: 100%;
    height: 50px;
    margin: 0px auto;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #666;
}
.headcontain {
    background-color: #2B2B2B;
    width: 1043px;
    margin: 0px auto;
    height: 50px;
}
.logo {
    width: auto;
    height: 50px;
    background-image: url(image/logo2.png);
    background-repeat: no-repeat;
    background-size: 130px 49px;
    background-color: #2B2B2B;
}
.nav2 {
    height: inherit;
    width: 300px;
    margin-left: 150px;
    float: left;
}
.fbmainlike {
    padding-top: 12px;
    width: 450px;
    float: right;
    color:#FFF
}

The background image is visible onFirefox and Chrome seem to be fine.

Upvotes: 0

Views: 564

Answers (3)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Add overflow: hidden; height: 1%; to your .logo

Try this:

.logo {
    width: auto;
    height: 50px;
    background-image: url('image/logo2.png');
    background-repeat: no-repeat;
    background-size: 130px 49px;
    background-color: #2B2B2B;
    overflow: hidden;
    height: 1%;
}

url without inside quote ' ' might be a problem

Upvotes: 2

markvicencio
markvicencio

Reputation: 146

.logo {
    width: auto;
    height: 50px;
    background-image: url(image/logo2.png);
    background-repeat: no-repeat;
    background-size: 130px 49px;
    background-color: #2B2B2B;
}

Do the background-image conflicts with background-image ?

because of the rules in hierarchy of css

Upvotes: 0

Leszek
Leszek

Reputation: 41

You seem to be mixing uppercase and lowercase in selectors.

You have:

 <div class="headcontain">
      <div class="Logo">

But in CSS:

 .Headcontain {...

and

 .logo {...

CSS selectors are case-sensitive. Try unifying the selectors in CSS and HTML.

Upvotes: 4

Related Questions