Search code examples
htmlcssfooter

Background-image overlayed with background-color in footer

Is there any possibility to have background-image overlayed with background-color in footer?

<footer class="layout_footer">
...
</footer>

.layout_footer{
  background-image: url('./../images/footer.jpg');
  background-size: cover;
  background-color: rgba(0,0,0,0.6); 
 }
Solution

  • You can use linear-gradient with your background image. I added height:100px just for demonstration.

    Browsers will treat linear-gradient as an image and will stack it with your actual image. 

    .layout_footer {

  background-image: linear-gradient(0deg, rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 0.6)), url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg');

  background-size: cover;

  height: 100px;

}
    <footer class="layout_footer">
  ...
</footer>