how to combine background image AND css gradient?

Question

I've searched around for over an hour without finding the correct answer before posting this, so hopefully someone can assist me. I have a div with a big image on my mainpage that is rendered like this:

<div id="hero"></div>

It works perfectly right now, but I want to add a gradient to the left and right side of the image to fade it out into almost black, however I can't seem to get it working.

The CSS for the hero div is:

#hero{
background-image: url("hero.jpg");
background-position: center center;
background-repeat: repeat-x;
background-color:#FFFFFF;
width:100%;
height:200px;
position:relative;
}

What I am trying to add is:

background: linear-gradient(to right, rgba(38, 35, 31, 0.8) 0%, rgba(65, 60, 53, 0) 50%, rgba(38, 35, 31, 0.8) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "";
left: 0;
opacity: 1;
right: 0;
top: 0;
transition: opacity 0.5s ease 0s;

However when adding it to the div, it's not working. I even tried combining the background-image and the gradient like:

background-image: url("hero.jpg"), linear-gradient(to right, rgba(38, 35, 31, 0.8) 0%, rgba(65, 60, 53, 0) 50%, rgba(38, 35, 31, 0.8) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);

but that's just showing a white space.

Any ideas what I'm doing wrong?

Thank you for any hints :)

EDIT: Note that I also have some content (buttons and text) inside the "hero" div, so it should not overlay the content, only the background image.

Why not fix the image - works all the time

Ed Heal
– Ed Heal

2014-04-26 06:53:29 +00:00
Commented Apr 26, 2014 at 6:53 — Ed Heal
– Ed Heal, Commented Apr 26, 2014 at 6:53

user2643870 · Accepted Answer · 2014-04-26 06:57:35Z

1

Actually, I just found my own answer, so I am posting it here in case anyone else needs it!

The way to fix it was use:

#hero:before

for the background gradient.

answered Apr 26, 2014 at 6:57

user2643870

1,0651 gold badge11 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

King King · Accepted Answer · 2014-04-26 07:28:08Z

1

Firstly, you place the background materials in the wrong order, to use multiple background feature, you should remember that the first placed background material (image or gradient) will cover the after placed backgrounds. Secondly, your colors can distinguish the gradient background against a white background but it's fairly dim against an image background. So I've tried changing it to black. Here are code details:

#hero{
  background: linear-gradient(to right, black, rgba(38, 35, 31, .5) 40%, rgba(65, 60, 53, 0) 50%, rgba(38, 35, 31, .5) 60%, black), 
              url("http://placekitten.com/500/200");
  ...
}

Demo.

answered Apr 26, 2014 at 7:28

King King

63.5k16 gold badges118 silver badges140 bronze badges

Collectives™ on Stack Overflow

how to combine background image AND css gradient?

2 Answers 2

Comments

Demo.

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related