Member Avatar for Dana A.

Hello everyone!

I would like to create a jello design for a webpage using HTML. Instead of using colors for the margins, I'll use a picture. What is the code that I should use ?

Thanks!

  • 3 Contributors
  • 2 Replies
  • 190 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #46692

Dani AI

Generated

@DanaA asked for an image-based “margin” effect. Rather than inserting decorative images into the document flow, a more maintainable, semantic and performant approach is to put the artwork in CSS. That keeps HTML clean, lets the browser cache one asset, and makes responsive/fallback handling far easier. The inline-image suggestion from is usable for quick tests, but it adds markup and can bloat downloads; ’s warning about load cost is on point.

Two practical patterns:

  1. Use CSS border-image when the design is a framed graphic with corners and edges — the browser will slice and place corners/edges automatically.
.jello {
  border: 30px solid transparent;
  border-image-source: url('frame-edge.png');
  border-image-slice: 30;
  border-image-repeat: round;
  padding: 20px;
}
  1. Use a narrow, vertically repeatable slice on pseudo-elements for left/right margins if the edges are simple strips. This uses no extra HTML and tiles efficiently.
.jello {
  position: relative;
  padding: 0 40px;
}
.jello::before,.jello::after{
  content:"";
  position:absolute;
  top:0; bottom:0; width:40px;
  background-image:url('side-slice.png');
  background-repeat:repeat-y;
}
.jello::before{ left:0; } .jello::after{ right:0; }

Optimization and compatibility notes: prefer a small slice (a few pixels wide) to tile rather than large full-width images; compress assets (PNG-8 or WebP where supported); provide a simple color/border fallback for old browsers; and hide or simplify decorative margins with media queries on narrow screens. For strictly decorative elements, keep them in CSS rather than HTML so assistive tech and content semantics remain correct.

Recommended Answers

All 2 Replies

Member Avatar for urtrivedi 
<img src='your_image.jpg' width=20px height 30px>
Edited by pritaeas because: Added markdown.
Member Avatar for Member #46692

This could potentially cause unnecessary page loading speed.

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.