background image as page width

[antonyx6666]

i am trying to duplicate the layout of this website example

you can see that the image stretches across the width of the page, however, when you right click on the image and choose 'view background image'
here the actual image itself is not the width of the page. therefore i am assuming the css or page settings zoom in on the photo in order for it to match the page width. is that correct?

can anybody explain how this is done?

thanks

 

[feherke]

Hi

That seems to be just the effect of [tt]background-size: cover[/tt]. See the recent Crop Top article by Parker Bennett for more.

Feherke.
feherke.github.io

 

[antonyx6666]

Excellent link, looks like just what I was looking for. Thank you.

 

[antonyx6666]

it seems as though the div will always zoom into the photo in order for it to fill the space. this of course will distort the image. is the only way around this to make an image which is guaranteed to be wider than any possible div ie 2000px? Would this then only show the visible area if it's centered or will it scale the pic down to fit?