CODEWITHSUNDEEP
htmlcssgradientbackground-color
Zhirayr
Zhirayr

Reputation: 423

CSS background gradient, image

I have a problem with background:

  1. I have 3 child elements.
  2. Each of them got background-image by #nth_image ID.
  3. Also they got background gradient by .background-gradient class.
  4. All png images got alpha channel

The problem is that background-image overwrite background gradient.

.background_gradient {
  background: -webkit-radial-gradient(top, ellipse cover, #f9f9f9 0%,#eaeaea 100%);
}
#first_image {
  background: url(images/img01.png);
}
#second_image {
  background: url(images/img02.png);
}
#third_image {
  background: url(images/img03.png);
}
<div class="parent">
  <div id="first_iamge" class="background_gradient"></div>
  <div id="second_image" class="background_gradient"></div>
  <div id="third_image" class="background_gradient"></div>
</div>

Upvotes: 1

Views: 127

Answers (2)

service-paradis
service-paradis

Reputation: 3397

If you want to mix 2 types of background on a single element, my suggestion is to use css pseudo element. You could use the before pseudo element having the same size as your element for your gradient part.

You could have something like this:

.background_gradient {
  position: relative;
}    
.background_gradient:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:-1;
  background: -webkit-radial-gradient(top, ellipse cover, #f9f9f9 0%,#eaeaea 100%);
}
#first_image {
  background: url(images/img01.png);
}
#second_image {
  background: url(images/img02.png);
}
#third_image {
  position: relative;
  background: url(images/img03.png);
}

Upvotes: 0

JoeMoe1984
JoeMoe1984

Reputation: 2032

Both the gradient and image background utilize the same image property of the background. Its as if you are writing it like this:

.class {
  background-image: url('/path/to/image.png');
  background-image: -webkit-radial-gradient(top, ellipse cover, #f9f9f9 0%,#eaeaea 100%);
}

so basically you are overwriting the image part of the background with the gradient or vice versa depending on which rule takes precedence over the other.

My suggestion would be to style your markup differently. Have a div inside of the div with the background you want.

<div class="background-gradient">
  <div id="first-background"></div>
</div>

Upvotes: 1

Related Questions