I’m using Windows 11 and the HTML Editor.

I have downloaded the free “yoga” Template and am stuck on controlling the size of the picture of the lady in the orange jacket on the first page. Attached is the main.css and index for this Template. The image in question appears on line 448 of the main.css document. The image is “yhreduction1-4.png.”

I have modified the original main.css Template to split the first container (container.image.hero-1) on Line 421 of the main.css file into the two columns in a 60% and 30% ratio. The image of the lady appears in the right column (centered) just fine, but the image inside that right column is too large. What and where do I add the code to control the size of that image? The size and ratio of the right column (30%) is fine, it’s just the size of the image inside that column that has me flustered.

I thought I could control the size of the image simply by modifying the image itself, i.e. reduce the size/resolution of the original image. But the % control of the right column just spreads whatever image resolution I import.

My brain is cooked. It should be so simple but I just can't make it work. I am asking for some specific instructions, like "add XXXXX to line XXX and delete line xxxx...you idiot." The last time I coded was 20 years ago. Not only have HTML and CSS changed drastically (concepts and terminology), the necessity to code for both mobile phones and websites is something I’ve never faced.

Try line 450 background position: center, center;
if that doesn't do it
line 453 background size: 100% auto;

If that doesn't do it


Consider buying CC Site Designer and build your site visually, so you can see what you do when you do something EASY PEASY

I tried both, and each one seemed to work fine.
You are brilliant.
Take the rest of the day off.