I’m creating a website that uses some basic illustrations in the background of the design and I’m not sure how to go about making them responsive. I want them to stay within the boundaries of the section they are in. When I go down to tablet and mobile view and drag to view different viewport widths they don’t scale with the design the way I want them to. If anyone could give me some tips on this it would be really appreciated. I’ve included the read only site.
hi @Atticus I presume you are talking about leaves png images. There is several ways. First you can use percentage or other flexible units. Another way is to create one SVG (your whole background design) and use it instead 3 independent images that need to be manually adjusted for each viewport.
On you text image change contain instead fill etc. etc.
One more thing I would like to mention, if you prefer to work with PNG you should optimise them as your images are way to big so you can work on this part as well as each unnecessary kb will increase page load.