Hi! I want to put a diffused ellipse behind an image in the hero section but its stays on top of the image for some reason. Could someone help? a view link provided

Design help Layout & Design
1

Hi! I want to put a diffused ellipse behind an image in the hero section but its stays on top of the image for some reason. Could someone help? a view link provided

Here is my site Read-Only: https://malaks-dapper-site.webflow.io

2

Hi Malak,

I think it’s likely that you need to set your image/containing div to position: relative and add a z-index to stack your elements, but without your read-only link it’s difficult to say for sure.

Could you provide your share your read only link, so we can take a look at your site in the designer?

1 Like
3

Here is me read only link : https://malaks-dapper-site.webflow.io

4

here is the link Webflow - Malak's Dapper Site

5

To fix this issue, you’ll need to adjust the positioning of the ellipse and the image using CSS. Here are the steps you can follow:

  1. Make sure the diffused ellipse is a separate HTML element from the image. You can create a new <div> element for the ellipse and give it a class or ID.
  2. Apply a position property of “absolute” to the ellipse’s CSS, so that it can be positioned relative to its parent container.
  3. Use the z-index property to place the ellipse behind the image. Give the image a higher z-index value than the ellipse.
  4. Adjust the positioning of the ellipse and the image as needed using the top, bottom, left, and right CSS properties.

Here’s an example of the CSS you can use:
.diffused-ellipse {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.hero-image {
position: relative;
z-index: 1;
}

In this example, the diffused ellipse is given a position of “absolute” so that it can be positioned relative to its parent container. The z-index is set to -1 so that it appears behind the image. The top, bottom, left, and right properties are set to 0 so that the ellipse spans the entire width and height of its parent container.

The image is given a position of “relative” so that it stays within its parent container. The z-index is set to 1 so that it appears on top of the ellipse.

I hope this helps! Let me know if you have any further questions or if you need more assistance.