Problem with linear-gradient on image background

Question

i have a problem with a div that has an image as a backround. When I try to give it the linear gradient, the background disappears. Thanks for the help and sorry for the triviality of the question, but I'm a beginner

.facebook{
    background-image: url(/img/facebook.jpg) linear-gradient(from left, 1 , 0);

}

.menu2style{
    border-top: solid 2px white;
    border-bottom: solid 2px white;
    height: 24.5%;
    display: flex;
    padding-left: 30px;   
    background-repeat: no-repeat;  
    background-size: cover;
    font-family: 'Bungee Outline', cursive;
    font-weight: 900;
    font-size: 90%;
    justify-content: flex-start;
    color: white;
    padding-right: 25%;

 <div class="camera2">
            <div class="menu2">
                <div class="menu2style facebook">FACEBOOK</div>

score 1 · Answer 1 · answered Oct 12 '22 at 18:45

For example:

.facebook {
  background-image: url(https://images.unsplash.com/photo-1665507254439-fe45f1417c13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60), linear-gradient(to left, #000 50%, #fff 0%);
}

.menu2style {
  border-top: solid 2px white;
  border-bottom: solid 2px white;
  height: 24.5%;
  display: flex;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Bungee Outline', cursive;
  font-weight: 900;
  font-size: 90%;
  justify-content: flex-start;
  color: white;
  padding-right: 25%;
}

<div class="camera2">
  <div class="menu2">
    <div class="menu2style facebook">FACEBOOK</div>
  </div>
</div>

Problem with linear-gradient on image background

1 Answers1