Helpful Information
Category: Web Design, HTML Reference and CSS
How to make an element display above a dynamic content? Pls, help.: HTML, CSS, JavaScript, PHP

Hello everybody,

First of all, please take a look at the image i attached in this post.

Basically, it is a static website. The only thing is that the picture of the sun needs to be changable with each reload of the site. I would like to use that area to have a rotating set of pictures and can also be used as an advertisement area.

But as the sun image there is not a rectangle image but a trapezium so i still don`t know how to make it changable. Is there anyway to make it rectangular in HTML template then have an element overlapping it so the trapezium shape will be in front of the rectangle like you can do with layers in Photoshop for instance?

Please help me. Thank you very much for your support.

Quite easy actually.

Put the "Life is good" logo as a gif. Use a transparent area for the little triangular insert so that you can see the image behind.

Not put the html together such that the changing image is in the background. E.g.

<div style="background-image:url('changing_image.jpg')">
<img src="life_is_good.gif" alt="logo - life is good">

I've used div, but td for a table would work just the same.

privacy (GDPR)