Question 257038 in Html Question posted in
Some basic documentation can be found here.

Html – Placing some lighting pngs on the top right corner and bottom left corner of a div

I have a landing page I designed in Figma but quickly met challenges when implementing it. I have 2 transparent images that I want to place at the corners of my first div.
Here’s a pic to understand more clearly

enter image description here

Now here’s what I tried but it looks very hacky and I want a better way if possible

  background-image: url('https://i.imgur.com/zld1w9Q.png');
  background-position: 1300px -1000px;
  background-size: 100% auto;

  background-repeat: no-repeat;

what’s the best way to do this while being responsive ?

Tags:

2

Answers


  1. 0

    Modify Your code to match this style:

    Parent div(container):

    style="position: relative;"

    Top-right image:

    style="position: absolute; top: 0; right: 0;"

    bottom left image:

    style="position: absolute; bottom: 0; left: 0;"

    Ensure that the images are still contained in the parent div.

    Login or Signup to reply.
  2. 0

    You can use CSS only for that:

    background: radial-gradient(circle at 90% 0,red 0, rgba(0,0,0,0) 20%), 
radial-gradient(circle at 10% 100%,blue 0, rgba(0,0,0,0) 20%);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search