Make a section with picture that fills and not stretches

Support
#1

Hello Guys,
So i am trying to make a thing wher ei got 2 sections, 1 with a text, 1 with a picture, and then in the middle of these 2 sections we got a headline showing.
This is working just fine.
Anyways, i tried to put in picture into the section. and this is fine.
BUT it ZOOMS it in so much.
I just want the original photo to fill in the section without zooming in.
( so we got a 100% width and picture just scales this down ? )
I tried to do it with a big picture and a smaller picture.
Both seems to do the exact same thing.
Page where i want it to work : http://test.vbentzen.dk/tjenester/brugerservice-internet/
And another thing to note: Why arent the picture showing up with a height in live mode ? when i look at the preview it looks all good ( the picture is taking up the “normal” section height. )

-Thanks.

#2

Hello @Aske,

Thanks for writing in!

Are you referring to the very first section on the page? Please be advised that when viewing a section in the Preview area, a default placeholder is added automatically when the column is empty. This placeholder is only visible in the preview area and not on the live page. Keep in mind that the column height depends on the height of its contents. If you leave it empty, there will be no height excerpt for the paddings and margins of the column. I would recommend that you use a gap element or set a minimum height of your empty column so that it will display some height and the section background image in the live view of the page.

Meanwhile, the section background image depends on the column height as well. The image is set to cover the whole section. With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

  • We normally use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

  • Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

  • Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

  • Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

For more details, please check this out:

Hope this helps.

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.