How can I add background image (png image format) to a div with pseudoelement ::before

user_14441063 0
Viewed 322

I have tried puting the path of my image directly into content. then, using background and oher several properties too but dont get to make them appear yet.

this is my HTML:

<div class="side-links-container">
   <div class="side-link search">
     <a href="#"></a>
   </div>
   <div class="side-link questions">
      <a href="#"></a>
    </div>
    <div class="side-link contact">
      <a href="#"></a>
    </div>
</div>

my CSS: (I use .scss)

    .side-link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  background: #249987;


  &.search a {

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      background: url('../dist/res/img/Lupe-side-menu.png') no-repeat;
    }
  }
}
pseudo-element css html
1 Answers

I can't immediately see a problem - the only possibility I think is that you have the wrong path to your background image OR you are seeing just a small part of your background (as the element has width and height 4.5em).

I translated the SCSS to CSS just in case there is a problem with the SCSS, but there doesn't appear to be. Here is a working snippet with a full-path background image url. Try putting a full path URL for your image in there and see what happens. Then try making it relative again. The background size is also set to cover so we get to see a reasonable amount of the image.

.side-link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  background: #249987;
}

.side-link.search a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: url(https://picsum.photos/id/1016/1024/768) no-repeat;
  background-size: cover;
}
<div class="side-links-container">
  <div class="side-link search">
    <a href="#"></a>
  </div>
  <div class="side-link questions">
    <a href="#"></a>
  </div>
  <div class="side-link contact">
    <a href="#"></a>
  </div>
</div>

user_108674540
Related