1 Column Background Image
Background = Image
Style = Content on Right Column
This image is 400 x 1200 pixels. Each square is 100 pixels tall and wide. The blue squares are numbered sequentially, so you can see how the picture is being cropped to make it fit your browser size. If the browser width is more than 1200 pixels then the image will stretch to the larger width and crop the height. If the browser width is less than 1200 pixels then it will retain the 400 pixel height and crop the width.
1 Column Background Image
Background = Parallax
Style = None
This paragraph uses the same 400 x 1200 image as the paragraph above. The difference is that this row is using the parallax scrolling feature.
1 Column Paragraph
Background = Image
Style = Content on Left Column
This image is 300 pixels tall by 1200 pixels wide. Each square is 100 pixels. The block is forcing the image to be 400 pixels tall, so it is resizing the image to a height of 400 and cropping the width of the image.
2 Column Paragraph,
Left Background = 600x400 Image
Content in Right Column
Styles = none
This image is 600 pixels wide by 400 pixels tall. The blue squares are numbered sequentially. Each square is 100 pixels.
2 Column Paragraph
Content in Left Column
Right Background = 200x600 Image
Styles = Orange background left column
The image to the right is 200x600 pixels The squares are all 100 x 100 pixels square. Even though the image is only 200 pixels tall, the 2 column format is forcing it to display at 400 pixels tall and cropping the width.
This column has a solid orange background so you can see the size of the entire column
This image is 400 x 400 pixels. The 3 columns will always be equal width across your page.