How can I add an image behind the gradient? – HTML and CSS – SitePoint Forum

https://jsfiddle.net/h3z7noc0/

Where do both separate together?

Click the play button and the gradient will separate.

I don’t want the image behind a fence gradient that separates them both when I click the play button.

Slope:

.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?

The gradient is on two different elements. Are you trying to put it behind both?

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

that’s not what i was looking for.

Both wanted to escape with gradation.

So the url is loaded twice and since the url is a rotation script the image is not the same in both panels and that’s where the problem is.

Then do the same thing you’re doing for gradients (using ::before), but use the :after pseudo-element for images.

To layer them, you need to set the z-index.

.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 is to use an image sprite or two URLs.

This may 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;
}

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

I thought that’s what you were asking if you want to split the same image in half?

Your version is two different images inside the sprite (but the images look like two solid colors).

This is an image sprite split in half.

Why did you say otherwise?

This works too: 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;
}

It’s because I squashed the height of the image. Solid colors are fine, but if you’re using a photo of a dog, it should be half the height determined by the aspect ratio. Added background-size:200% 100% which is not suitable for the natural aspect ratio of the image as the version cannot use the cover value. dog is crushed You could use 200% 200% but that would make it harder to wire the size instead of letting the cover do it all like my suggestion.

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

Equivalent to:

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

Never mind, no, it’s not.

A smaller window area will ruin the image.

you are right!

This works: https://jsfiddle.net/03Ltw1zc/

It 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%; It does not work.

I think it’s somewhere between 177% and 178%

It must be a decimal number for what I don’t understand.

background-size: 200% ?;

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

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

Alternatively, only use 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 two different images (one image on the left and another image on the right)?

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

Height: 360
Width: 640

360 + 360 = 720

360/640 = 0.5625

Which calculation did you forget?

If the image is the exact height of the element, you can set the background size to 200% 100%.

I need 200% (width) because I’m trying to put an image on an element that is only half the width I want, but the element is full height.

In my pseudo-element method, the element fills the entire area, so just use the cover property.

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