Pseudo:after not executing

HTML & CSS
1

For a grand cafe I am making a website using a full image background. I would like to have a pattern overlay on top of the image so I decided to use the background-size: cover property in combination with pseudo:after the following way:


.background,
.background:after {
  width: 100%;
  height:100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

.background {
  background: url(../page_backgrounds/index.jpg) no-repeat center center fixed;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../page_backgrounds/index.jpg', sizingMethod='scale'
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../page_backgrounds/index.jpg', sizingMethod='scale')";  
}

.background:after {
  content: "";
  background: url(../images/site/pattern.png) repeat;
  z-index: 1;  
}

The backgound: cover is working but the pseudo:after isn’t as you can see here.

The pattern image is in place as you can see here so that can’t be the reason.Is there something else I am doing wrong?

2

You made an error in your CSS. It needs to be this:

.background:after {
  [COLOR="#FF0000"]content: "";
  background[/COLOR]: url(../images/site/pattern.png) repeat;
  z-index: 1;  
}
3

Hi ralph! Oops I must have remove the first line by accident I have recovered that but still nothing?

4

Your filter code is causing it not to work. It’s probably because of the missing ; at the end of the first line. If that doesn’t fix it, just get rid of the filter stuff altegether to see that my code works.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../page_backgrounds/index.jpg', sizingMethod='scale'[COLOR="#FF0000"];[/COLOR]
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../page_backgrounds/index.jpg', sizingMethod='scale')";
5

Hi Ralph, The filter part was indeed causing the problem. Thank you for the help :tup: