Pseudo element not showing background-image

user_7216193 0
Viewed 8182

Why is my background-image inside the pseudo element ::before not showing up? I also tested of replacing the background-image with a background-color and it still doesn't work. This is in SASS format in case some would be wondering of the nested ::before.

.logoframe{
      float: left;
      height: 817px;
      width: 20%;
      position: relative;
      left: -6%;
      transform: skewX(-11deg);
      border: 1px solid #e26f6f;
      &::before{
        content: "";
        background-image: url('/images/theseven/seven_img_old.png');
        background-repeat: no-repeat;
        position: relative;
        height: 817px;
        width: 150px;
      }
    }
<div class="logoframe"></div>

frontend pseudo-element sass css html
4 Answers
Sometimes you need to add background-size property too with display: block.

&::before{
        content: "";
        background-image: url('/images/theseven/seven_img_old.png');
        background-repeat: no-repeat;
        background-size:100%;
        position: relative;
        height: 817px;
        width: 150px;
        display:block;
      }
user_146748060

I don't know if this helps but sometimes if you are using the shortcuts for the background property it might not work, but if you use the properties differently I think it might work. I am saying this from experience.

.showcase::before {
  content: '';
  background-image: url(../images/Desert.jpg) no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

But this one did.

.showcase::before {
  content: '';
  background-image: url(../images/Desert.jpg);
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
user_109781970
Related