How might I add an image behind a gradient?

https://jsfiddle.net/h3z7noc0/

Where both would separate together?

After the play button is clicked, the gradient separates.

I want t place an image behind the fence gradient where both would separate together after the play button is clicked.

Gradient:

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  background:
    linear-gradient(45deg,
      transparent,
      transparent 7px,
      red 7px,
      red 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      red 7px,
      red 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  /* filter: drop-shadow(0 0 5px #000);*/
  pointer-events: none;
}

Image code:

  background-image: url("https://picsum.photos/640");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;

Where are you trying to put the image?

Behind the gradient.

The gradient is on 2 different elements. Are you trying to put it behind BOTH of them?

Yes.

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  background: url("https://picsum.photos/600");
}

That isn’t what I was looking for.

I wanted both to break away with the gradient.

So you’re going to run into a problem there because the url will get loaded twice, resulting in the image not being the same on both panels because your url is a rotating script.

Then do the same as you are doing for the gradient (which uses ::before) but use the :after pseudo element for the image.

You will have to set z-index to layer them.

.panel-left::after,
.panel-right::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
    background-image: url("https://picsum.photos/id/237/640");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;
  pointer-events: none;
  z-index:1;
}

.panel-right::after {
  left: -100%;
}
/*   */
.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  z-index:2;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  background:
    linear-gradient(45deg,
      transparent,
      transparent 7px,
      red 7px,
      red 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      red 7px,
      red 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  /* filter: drop-shadow(0 0 5px #000);*/
 
  pointer-events: none;
}

.panel-right::before {
  left: -100%;
}
.play{z-index:3;}

I got it: https://jsfiddle.net/cjkw4brt/

Another way would be using an image sprite, or 2 urls.

Which might be less code.

https://jsfiddle.net/cngk4vy7/3/

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all 8s ease;
  transition-delay: 1s;
  overflow: hidden;
  background: url("https://i.imgur.com/xssQZZs.png");
  background-position: 0 0;
  background-size: 200% 100%;
  background-repeat: no-repeat;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
  background-position: top right;
}

2 image urls: https://jsfiddle.net/q7u3wgy5/

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all 8s ease;
  transition-delay: 0s;
  overflow: hidden;
}

.panel-left {
  left: 0;
  background: url("https://i.imgur.com/xssQZZs.png");
  background-position: left top;
  background-size: 200% auto;
  background-repeat: no-repeat;
}

.panel-right {
  right: 0;
  background: url("https://i.imgur.com/xssQZZs.png");
  background-position: right top;
  background-size: 200% auto;
  background-repeat: no-repeat;
}

Not if you want the same image to split in half which was what I assumed you were after?

Your version is 2 different images in a sprite (although your image just seems to be 2 solid colors anyway).

Here is the image sprite splitting in half.

Why did you say it doesn’t?

This works also: https://picsum.photos/id/237/640

https://jsfiddle.net/9mgkeqwf/

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all 8s ease;
  transition-delay: 1s;
  overflow: hidden;
  background: url("https://picsum.photos/id/237/640");
  background-position: 0 0;
  background-size: 200% 100%;
  background-repeat: no-repeat;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
  background-position: top right;
}

Because you’ve squished the image height. It doesn’t matter for a solid color but if you use the picture of the dog then its half the height it should be as determined by its aspect ratio. You can’t use the cover value in your version which is why you added background-size:200% 100% which is not right for the natural aspect ratio of the image. The dog is squished. You could use 200% 200% but then you are hard wiring the size rather than letting cover take care of it all as in my suggestion.

1 Like

Image Sprite: background-size: auto; https://jsfiddle.net/ewm71Lvc/

Is equivalent to:

background-size: cover; https://jsfiddle.net/o6r3a7je/

Never mind, no it isn’t.

When the window area gets smaller, the image gets ruined.


You are right!

This one works good then: https://jsfiddle.net/03Ltw1zc/

Just doesn’t work with image sprites.

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all 8s ease;
  transition-delay: 0s;
  overflow: hidden;
}

.panel-left {
  left: 0;
  background: url("https://picsum.photos/id/237/640");
  background-position: left top;
  background-size: 200% auto;
  background-repeat: no-repeat;
}

.panel-right {
  right: 0;
  background: url("https://picsum.photos/id/237/640");
  background-position: right top;
  background-size: 200% auto;
  background-repeat: no-repeat;
}

background-size: 200% 200%; won’t work.

I think it is somewhere between 177% and 178%

It would need to be a decimal number of something I can’t figure out.

background-size: 200% ?;

It would depend on the size of the image. Find the height of the image as a percentage of the width and then double it.

Or, here’s an idea.,… just use the cover value like I told you.

Or use only images that match the aspect ratio of the space you want to fill.

It’s not clear what you are trying to do. Do you want 2 different images (one image on the left but a different image on the right)?

Find the height of the image as a percentage of the width and then double it.

The height is: 360
The width is: 640

360 + 360 = 720

360 / 640 = 0.5625

What math am I forgetting to do?

If the image is the exact height of the element it fills then you can set its background size to 200% 100%.

The 200% (width) is needed because you are placing an image in an element that is only half the width that you want but the height of the element is the full height.

In my pseudo element method the element fills the whole area so you can just use the cover property.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.