Pseudo element not showing background-image - html

Question

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>

Answer 1

the "display" property. display is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline . A block element is often called a block-level element.
&::before{
content: "";
display: block;/*missing prop*/
background-image: url('/images/theseven/seven_img_old.png');
background-repeat: no-repeat;
position: relative;
height: 817px;
width: 150px;
}

Answer 2

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;
}

Answer 3

You should update below css part. if you need background image in center please update background-position.
.logoframe{
float: left;
height: 817px;
width: 20%;
position: relative;
left: 0;
transform: skewX(-11deg);
border: 1px solid #e26f6f;
}
.logoframe:before {
content: "";
background: url('https://n2.sdlcdn.com/imgs/a/a/1/Chromozome_Yamaha_102025_m_1_2x-4ab77.jpg') 0 0 no-repeat;/* replace 0 0 to center center */
background-repeat: no-repeat;
position: absolute;
background-size:contain;
top:0;
left:0;
height: 817px;
width: 100%;
}
<div class="logoframe"></div>

Answer 4

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;
}