Search code examples
htmlcssinternet-explorer-6

Header background picture not showing on ie6


I’ve noticed that the background picture of my header is not showing at all on ie6. See http://goo.gl/YbW2xb

Don’t want to make my website looks perfect on ie6, but is there a quick fix for that?

Many thanks,

CSS:

header {
position: relative;
  width: 100%;
  height: 600px;
  margin-right: auto;
  margin-left: auto;
  background-size: 100% 100%, cover;
  background-color: rgb(222, 222, 222);
}

.wrapper-3 header {
  background-image: -webkit-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:    -moz-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:      -o-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:     -ms-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:         linear-gradient(359deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-position: 0% 0%, center center;
  opacity: 0.95;
}

HTML

<div class="wrapper wrapper-3 clearfix">
    <header class="clearfix">
</header>
</div>

Solution

  • try this. replace your css with this. add

    .wrapper-3 header {
      background-image:url('../images/.jpg'); /*add this for IE*/
    
      background-image: -webkit-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
      background-image:    -moz-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
      background-image:      -o-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
      background-image:     -ms-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
      background-image:         linear-gradient(359deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
      background-position: 0% 0%, center center;
      opacity: 0.95;
    }