CODEWITHSUNDEEP
htmlcssfooter
st.limp
st.limp

Reputation: 141

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

Upvotes: 1

Views: 1067

Answers (5)

code.rider
code.rider

Reputation: 1897

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

}

Upvotes: 1

Muhammet
Muhammet

Reputation: 3308

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>

Upvotes: 3

Jack
Jack

Reputation: 446

This is from https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

Change the color and paths to your choice

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

you can do with this :after css property 

.layout_footer{
  background-image: url('https://www.gravatar.com/avatar/b962594a4e8d0aa2219d0b5e15f72c39?s=32&d=identicon&r=PG&f=1');
  background-size: cover;
position:relative;
  height:200px;
  width:200px;
 }
.layout_footer:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.6);
}
<footer class="layout_footer"></footer>

Upvotes: 2

JGCW
JGCW

Reputation: 1529

This should do the trick :). 

layout_footer {
    opacity: 0.4;
    background-color: #000000;
    background-image: url('./../images/footer.jpg');
 }

Upvotes: 1

Related Questions