Help with fullwidth image

  • Resolved sorro445

    (@sorro445)


    7 years, 2 months ago

    Hello,
    I like your plugin very much, but I am having trouble with one thing:
    I have a row that is set to fullwidth stretch. In it are two equal size cells (like a split layout), and one of them is supposed to have an image in it. I need the the image to always stretch from the screen border to the middle of the page, that’s why I had set the row to fullwidth stretch. The problem is that if I set the image as the cell background, the image will get cut off when resized on smaller screens. But if I use an image widget instead the image will only get as large as the uploaded image – so on very large screens there will be a gap. How can I create a cell with an image that always fills across to the screen width but still resizes without getting cut off?

    I hope you will be able to understand my problem 😉

    Thank you!

Viewing 1 replies (of 1 total)
  • Plugin Contributor alexgso

    (@alexgso)

    7 years, 2 months ago

    Hi sorro445,

    Please add the HTML image using a SiteOrigin Image widget and set the widget to output as Full Width. The SiteOrigin Image widget is added by the SiteOrigin Widgets Bundle plugin.

    Regarding the background image getting cut off, unfortunately, that’s a technical limitation of CSS backgrounds set to cover so it’s not preventable. The image must maintain the height of the area it’s applied too and to ensure this happens, the browser can clip the sides of the image off. You can reduce how much is clipped off by reducing the height of the row at lower resolutions.

Viewing 1 replies (of 1 total)

The topic ‘Help with fullwidth image’ is closed to new replies.