Help with image in section doesnt seem to be wysiwyg?

Hi Jeff,

As I can see the image is used as the Section background image. Each Section has a page width. This
width is not fixed and depends on the browser viewport size. The editor window is limited in size to display all editor tools. When you make a preview you do not see the editor and the page is displayed as it is.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Ok I set up a new page and tried the image in the section and as a picture added in and then in Chrome I shrunk the screen and stretched it and can now see what you mean.
However, this now doesn't help as I have an image I need to be seen in all sizes of device from desktop to mobile..so is there some way of ensuring the heads dont get cut off.
Do I need to change the image somehow or place it in a container or what??

Hi Jeff,

In order to keep image proportions please use diameter diagonal red rule line:

This should help.
...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

thanks, sorry but how?? what would I do? Use it as section image or in a container?
Do I resize in each section using the diagonal resizer?

Thanks

Hi Jeff,

I don't know what result you want to achieve. Therefore it is difficult to say. Container is just a wrapper.
If you stretch it to cover the Section and add Container background image this image will behave the same as Section background. The same is related to the case when you use Picture control inside Container or directly in Section. Container is better for groups of controls. The single Picture can be located directly in Section.
The diagonal rule is used to keep the image proportions during resizing. This helps to keep image proportions in responsive modes too.
I suggest that you try to stretch the image and keep proportions. Then change Section height to match the height of the image. And then adjust the Section height in responsive modes to achieve a better result. You can also try to resize the image to cover the sheet width only (two vertical dashed lines). The Sheet width is fixed. Therefore on the different screens, the image will look the same.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

This is confusing me too. I'm putting the image in the section (now named block?) as a Background image so I assumed that would mean it would resize correctly on whichever device it's displayed on but like Jeff said, it changes.

Hi,

Please note that background image is a style property of the element (Section). It does not affect Section height. Instead of this images resizes depending on the Section(Block) size, but it resizes with keeping the image aspect ratio. Therefore when the Fit is selected as "Cover" some parts of the images may not be visible because the image size does not match the Section size. The same happens when the "Contain" is selected. In this case, the image width is equal to the Section width, but the image height may be different than the Section height, and white gaps may appear. This is default behavior of css background images.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Sorry I have been away.
I am afraid you lost me!
Is there any possibility of doing some sort of tutorial to show how people can add an image that is to be the background image and that this image will retain its aspect ratio in each mode, ie deskstop/phone/tablet/laptop.
From what I can follow here it sounds like this aspect of adding an image to be the background does not work in responsive mode and what you are suggesting is that we should adjust the image accordingly for each mode... I have even tried adding the image each time but of course that doesnt work as the image you add in each mode changes all the images showing in each mode (:) )

I simply want my image to look pretty much the same in each mode..ie if I show a wedding scene with a couple I want the couples heads to still be showing in phone mode as it is in desktop mode. I appreciate that not all of the width of the image will still remain but the image should surely 'shrink to show a smaller image to 'fit ' to a degree the smaller mode.
:)
Help??

Hi Jeff,

add an image that is to be the background image and that this image will retain its aspect ratio in each mode, ie deskstop/phone/tablet/laptop.

Background image always retains its aspect ratio. But you can choose between "Cover" and "Contain" fit options. The difference is that when "cover" is used, the image covers the whole container (width and height). But since it retains proportions, some parts of the image go outside the visible Section borders. "Contain" option means that the image will fit the Section width only. In this case, you will see the empty space around the image because Section size and image size cannot be equal. The background image is a style of the container (Section), not the independent HTML element. All styles follow the basic CSS rules, including the Section background image.

When you switch between responsive modes, the Section width changes. The Section height may be changed too. This affects the image size (width and height) also, but not its aspect ratio.

So, if you want to see the whole image, you should either use "Contain" fit or do not use this image as a background image. Use it as Picture control and resize it with the diagonal marker, as shown above.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

I know I have been harping on about this but I just dont get what you mean... precisely ..I think I am trying what you suggest but cannot get things to work. Why cant you do a tutorial on it to show us exactly how!
I tried what you said on your last response about using it as a picture control??? I think...and it looked like it might be working. When i went to next mode ok, when I went to next mode the footer was halfway up the image and I could NOT move it back down... so then I realised I needed to move the size of the block in which the image was and found the image changing sizes which wasnt what I wanted. SO went back to first deskstop... managed to change that back... and in the next..etc... but what I ended up with in preview mode was image ok in all modes except deskstop where the top of image was chopped off..even having used perspective...
I have attached a copy so you can see..and its no good saying dont use that image ..whats the point of a website if I cant use images just because they dont suit the system...its not quite working as people are given to believe it will.
I then looked and saw that even though I chose a block and straight for image , no container nothing else..it is in as a background image so I dont understand you saying dont use background image use picture control...when if I add an image it goes in as background image... I used the perspective adjustments..and still doesnt work. All I want is the image to be seen with the five people in each mode...it funnily enough started to work in cover mode and something I did seemed to get it to work but I decided to change teh quality of image in photoshop and when I changed teh image whatever I
had done to get it to work stopped. SO hence I started all over again and tried to follow your suggestions which brings me back to you here and this example.
I cant be the only person who has images they want to use as absolutely necessary to their website and cannot use them because of some issue with width and height of modes....its not something I had a problem with in a different piece of software I used previously.
If there is some issue that you cannot resolve then allow it to change each mode separately... currently what I do in one affects the rest in strange ways.
Please help

I have added several as I tried to recreate events but the first one weirdthingshappen is best to view first.

Last edited 18 July 2019 by Jeff Hartley