Home/ Questions/Q 5930575
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T14:34:25+00:00

Looking for some hints and tips on how I could implement the design below

  • 0

Looking for some hints and tips on how I could implement the design below in html/css:

enter image description here

The candle is an image. The green background is a tiled background of a div that contains other elements while the pink background is the background of the whole page.

How do I put the candle image in such a way that the most of it is inside the div with the green bg and then the small protruding part of the fire has for its bg the pink pattern? Note that the pink patten is the bg for the whole page.

The green image

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would make the candle a transparent PNG file so I don’t have to go through the hassle of building a candle image that has the stripes and dots of the background images aligned correctly.

    That may create issues in IE6 if you use alpha transparency, but there are workarounds for that.

    Then I’d place the candle in a container with float: left or position: absolute (Depending on the rest of the layout), positioned to the left hand side of the green area.

    The image itself would then get position: relative; top: -50px (adjust accordingly) to move up outside the content container.

    • 0