<![CDATA[Different background images per row – responsive scaling]]>Dear Laytheme Forum,

I would like to use different background images for different rows on a page of my website.

The idea: I commissioned a designer to create a frame that looks like a floor plan of an apartment, where each row represents a different “room.”

The issue I’m facing is that the background images are not displayed correctly — parts of the “walls” get cut off when I set them as backgrounds.

I’m looking for a solution (maybe with using CSS) where:
the background image fully covers the entire row (top, bottom, left, and right),
nothing important gets cut off,
and the image scales proportionally depending on the browser size (responsive behavior).

You can see my page here:
http://www.ar-mut.ch/start

This is what one of the images looks like:
https://ar-mut.ch/wp-content/uploads/2026/03/Ar.Mut_HP_1024x768_v02_s06.png

Does anyone have an idea how to achieve this properly?
Thanks a lot and best regards,
Dennis

]]>https://laythemeforum.com/topic/11809/different-background-images-per-row-responsive-scalingRSS for NodeMon, 06 Apr 2026 02:39:15 GMTWed, 25 Mar 2026 10:53:38 GMT60<![CDATA[Reply to Different background images per row – responsive scaling on Thu, 26 Mar 2026 14:51:36 GMT]]>hey thanks that worked absolutely fine. Great help!

]]>https://laythemeforum.com/post/46874https://laythemeforum.com/post/46874Thu, 26 Mar 2026 14:51:36 GMT<![CDATA[Reply to Different background images per row – responsive scaling on Thu, 26 Mar 2026 11:11:13 GMT]]>maybe today or tomorrow. i ended up calling it "stretch" instead of fill just to let u know

]]>https://laythemeforum.com/post/46871https://laythemeforum.com/post/46871Thu, 26 Mar 2026 11:11:13 GMT<![CDATA[Reply to Different background images per row – responsive scaling on Thu, 26 Mar 2026 08:15:01 GMT]]>Oh great. Thanks. When will be the next update? :)

]]>https://laythemeforum.com/post/46864https://laythemeforum.com/post/46864Thu, 26 Mar 2026 08:15:01 GMT<![CDATA[Reply to Different background images per row – responsive scaling on Thu, 26 Mar 2026 06:15:57 GMT]]>ok i see, please try this:

remove the empty rows from your layout,
dont use custom row height or browser height on your row

instead, click on an empty part of the row, then enter values for row padding top and row padding bottom (here i chose 50px, 50px as u see in the screenshot below), choose the row background image, and then choose object fit: fill, like here:

grafik.png

object fit: fill will only be available with the next update

this will stretch your image to be a perfect frame around the row

]]>https://laythemeforum.com/post/46857https://laythemeforum.com/post/46857Thu, 26 Mar 2026 06:15:57 GMT<![CDATA[Reply to Different background images per row – responsive scaling on Wed, 25 Mar 2026 14:00:32 GMT]]>@arminunruh sure. Something like this: https://ar-mut.ch/wp-content/uploads/2026/03/Bildschirmfoto-2026-03-25-um-14.56.19.jpg

or like this:

https://ar-mut.ch/wp-content/uploads/2026/03/Bildschirmfoto-2026-03-25-um-14.57.33.jpg

Here a worktest, where you see my problem: https://ar-mut.ch/start-test/

]]>https://laythemeforum.com/post/46848https://laythemeforum.com/post/46848Wed, 25 Mar 2026 14:00:32 GMT<![CDATA[Reply to Different background images per row – responsive scaling on Wed, 25 Mar 2026 11:52:58 GMT]]>actually since the texts you want to have on the frame need to position themselves with the image when the browser sizes i changing, have you ever though about this:

just insert the frame as a normal image, then in the sidebar, use the "text on image" feature:

grafik.png

]]>https://laythemeforum.com/post/46840https://laythemeforum.com/post/46840Wed, 25 Mar 2026 11:52:58 GMT<![CDATA[Reply to Different background images per row – responsive scaling on Wed, 25 Mar 2026 11:35:11 GMT]]>currently you can insert a image, use fixed height, and object position contain and make sure the images' width goes over the full layout width and then make sure height is set to 100svh:

grafik.png

but i think thats not sufficient for what you need

]]>https://laythemeforum.com/post/46836https://laythemeforum.com/post/46836Wed, 25 Mar 2026 11:35:11 GMT<![CDATA[Reply to Different background images per row – responsive scaling on Wed, 25 Mar 2026 11:33:38 GMT]]>hey dennis!

can you post a picture of the design here, so i can see what the end goal is?

i can certainly make this happen, i just need to see the big picture

]]>https://laythemeforum.com/post/46835https://laythemeforum.com/post/46835Wed, 25 Mar 2026 11:33:38 GMT