If you use "cover" it will grow until it is big enough to hit the furthest edge of the container but will expand beyond the nearest edge getting cut off, so again if we assume a 1200px wide screen it will 'grow' to 1200px wide to fill the screen but in doing so will grow to 510px tall, meaning the container will be entirely covered but the bottom third of the image will be cropped off as it is now taller than the container.
So say we have a 1200px wide screen the remaining 400px will be blank. "contain" means the image in it's original aspect ratio will fit in the container, so say your image is 170px tall and 400px wide, the image will grow to fill the container but won't expand beyond the first edge it hits, so your height:340px means it can double in height and width to 340px x 800px but if the 100% is greater than 800px the remainder won't have a background. Without knowing the aspect ratio of the image or what it shows I can't say which will work best, but (I think) you need to change background-size:contain to either background-size:100% 100% or background-size:cover
0 kommentar(er)
