I am in the design phase of the website. My hero section is simple… Text in middle of screen and then images all around the background. I have the body defined as my relative position. Each image is set to absolute position. Like you would expect, the images move all over the place when you change the screen size.
My question is, with this type of section, what is the best practice to get images to stay pretty much in the same area? Do i need to create a large image with all images in it and use that as the background? Do i need to create a grid and then make each section have a relative position so the images can reference that vs having body be the relative position?
It will be helpful to see your read-only link to inspect.
• I’d personally use a 100% x 100vh header div and set it to relative vs. using the body.
• With absolute positioning of the illos, you can choose the quadrant top-left, top-right, bottom-left, bottom-right as the starting point and then use scaled margins or position shift to move them away from the edges. This will keep the center area clear for the headings/button
• each illustration can have a width set to vw, % which will scale to avoid overlap
• fine tune these sizes for each breakpoint
Create a div and set the div to relative, then make the div either a specific height and width px or 100%. Then put your images in the div and set them to absolute and place them where you’d like them. As long as they inside a div with a set size, they shouldn’t move all over the place when resizing.
Here is an update… I got no where. Still uncertain as to what im doing wrong.
Issues im still having:
images dont scale properly
images move around alot when changing device view
Things i have done…
To resolve scaling issue - i have put each image in a div and set max w to 100%.
to resolve images moving around - just dont understand how to prevent such massive moves.
My relative block is the header. Then i set each div containing the image to absolute and position them in the desktop view. But when going all the way down to mobile, the images get very small and move around. Attached in an image to show what im talking about.
Sorry, I didn’t get a notification that you’d responded! Not sure why.
The read-only link no longer works so I’m assuming that you may have abandoned this project. Happy to help out if you care to share a new link.
My initial reply (without seeing the working file) is that you should switch to a defined pixel size on the little illustrations, once you hit the mobile viewports.
