Shape 5

Ive got a background image in the Top Row 1, Area 1. When viewed on a 13 or 15 inch monitor the picture fits well, with the buttons aligned. Ive got the background image size  option as 100% auto. When the image is viewed on a larger resolution, the image stretches across the screen making the buttons look out of line. How do I get this image to scale the same way, regardless of resolution?
Link - www.pearltutoring.com.au
Thankyou.

Hello,

That is because the height is too small. 100% auto means it's 100% of the width and the height is automatically calculated. If your content becomes longer than the aspect ratio of the picture this will happen. You can either increase the percentage or use "cover" instead.

I still dont understand. I've changed the background to cover but the buttons are still not aligned, in relation to the text. I've attached two images, one 13inch and one 24 inch. I need the buttons in the same spot, underneath the writing regardless of the screen size.

thanks

Hello,

This is because your buttons are published to the top_row1 which is contained by the body width. For example you can see the buttons will always be in line with the left edge of your Home Menu button since the menu is also contained in the body.

So as your page gets smaller so does the padding on the right and left of the body therefor changing the position of the buttons in relation.

Oh I see. Could you offer any alternatives to what I'm trying to achieve?

Hello,

The background image you are using is not a good idea for responsive because getting her head to scale properly in the container on multiple screens correctly is going to prove difficult. Generally the backgrounds for these areas are meant for patterns, colors or elements that do not rely on perfect scaling. As Mikek said the best bet is probably to use "cover" if you wanted to keep that image as is.

You definitely don't want the text as part of your background image. You would want to set up some containers for those so you can easily move them around. When you have buttons that are overlaid, an image with text and a portrait of a lady it is going to be nearly impossible to scale properly.

I would remove the text from the image and add it as a module position in the top row along with the buttons you added. Then maybe text-align them both to the center so they are always in the middle.