i have tried everything i know but nothing is working can someone plase help
How do you mean this? Are you trying to do something like border-image or something else?
i want the images to be round the text something like in the picture. do you want me to post an example.
I was looking for exactly the same thing but I couldn’t find a way to do so
Hi, I won’t give you exact code source but I would like to explain how to do it:
HTML
- You need a container, main wrapper like
section
tag. It’s better to wrapimg
tags infigure
tag and the text in anarticle
tag but in your case you may not use these semantic tags. You need to figure it out by yourself. My advice it’s better without thefigure
andarticle
tags because, in your case, it’s a bit tricky. That’s why let’s simplify it.
CSS
- You will need to use grid layout in your
section
tag. It would be better to take a look. CSS Grid section
tag, class or id which represents yoursection
tag should be positioned relative then images and text should be positioned absolute. This way, you’ll have a parent element and its children positioned as needed. This means you’ll be able to position them however you want.
If you need further assistance, feel free to ask!
Happy coding!
One thought is a single background image made from all four images. Make an optimized PNG and leave enough room for the text. Mind, if they are important images that we want indexed, then the presentation is very non-standard and should be reconsidered. It will play absolute havoc with responsive design.
Thanks for the help but it still doesn’t work the way i would like
that could work but the images positioning in the bigger image would not work
To place images around text in HTML and CSS, use the tag in HTML, then apply CSS float property. Set float: left or float: right to position images next to text. Use margins for spacing around the image.