Member Avatar for neha05

How to give the wrap edge effect on any image using css..

Edited by Member #120589 because: wrong forum
  • 2 Contributors
  • 5 Replies
  • 290 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by neha05

Dani AI

Generated

Short summary tied to the thread: asked for a “gallery wrap / bleed / mirror sides” look and pointed toward better search terms. Below is a compact, responsive CSS-only pattern that produces a mirrored wrap (left and right sides) so a photo visually continues around the edges like a stretched canvas. It works without server-side image edits and degrades cleanly if CSS variables or transforms aren’t supported.

HTML

<div class="wrap-canvas" style="--img: url('photo.jpg'); --wrap: 60px;">
  <img src="photo.jpg" alt="Photo">
</div>

CSS

.wrap-canvas{
  --wrap: 60px;
  --img: url('photo.jpg');
  position: relative;
  display: inline-block;
}
.wrap-canvas img{
  display: block;
  width: 100%;
  height: auto;
}
.wrap-canvas::before,
.wrap-canvas::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--wrap);
  background-image: var(--img);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: left center;
  pointer-events: none;
}
.wrap-canvas::before{
  left: 0;
  transform: translateX(-100%) scaleX(-1);
}
.wrap-canvas::after{
  right: 0;
  transform: translateX(100%) scaleX(-1);
  background-position: right center;
}

Notes, troubleshooting and alternatives:

  • If seams appear, try background-size: auto 101% or add a 1–2px bleed in an image editor. Compression artifacts on JPEG edges can show up; consider PNG or slightly larger background-size to hide seams.
  • For a stretched “bleed” (not mirrored) set background-size: cover on the pseudo-elements instead of scaleX(-1).
  • Top/bottom wrap requires extra elements (or additional wrappers) because a single element has only two pseudo-elements.
  • Pure CSS may cause the browser to request the same image more than once in some environments; for critical performance, pre-generate a wrapped file server-side (Photoshop/GIMP mirror-bleed) and serve that single asset.

This gives the same visible effect as the canvas-wrap example mentioned earlier while keeping the implementation responsive and editable via the --wrap variable.

Recommended Answers

All 5 Replies

Member Avatar for Member #120589

Tricky search terms.

Edited by Member #120589
Member Avatar for neha05

right diafol thanks forr that but my requirement ,I would like to display the photo images
1.mirror gallery wrap the (bleed wrap or bleed mirror sides or wrap fdge in bleed)

Member Avatar for Member #120589

Shame you hadn't mentioned that. OK, well now you have the terms you need, you can search yourself.

Member Avatar for neha05

sorry sir:( i did'nt done it intensionally,and i searched alot on it but didnt get anythgt accorfing to my required yet.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.