I have just set my first steps in the world of web development. For a small project I want to use a .png image as a full-screen background for the homepage. But with the code I used I don't get the image set right. It looks like it is zoomed in and some of the text of the image isn't showed at the page. But if I use the inspector option, then it shows the picture on the correct size..

I used the following .scss code.

`.banner{
height: 100vh;
background-image: image-url("banner-home.png")
background-size: cover;
background-position: center:
}`

print-screen, if I use the inspector option the picture is shown correctly

CodePudding user response：

The Fix

You may want to use background-size: contain instead of cover, and you'll also want to set a background-color at the same time (most likely to that same green tint the image uses, but first set it to red so you can see its effect and understand how it works).

The Issue

The issue occurs because the image's proportion doesn't exactly match the browsers (and it never will), so cover makes sure that 100% of the browser is filled (eg: it scales the image up until both the width and height of the image >= the width/height of the browser. And then whichever of the 2 dimensions is too large, gets clipped off (the height in your case).

contain scales up until either the width or height matches the browser, which means one of the 2 dimensions won't be fully covered (in your case that will be the width most likely), which means you'll get some bars on the sides (hence you'll want to set a background color).

CodePudding user response：

Instead of writing background-image: image-url("banner-home.png") background-size: cover; background-position: center:

You can simply write background: url('./picture.name') no-repeat center center/cover

The . In the url might depend where you holding your pictures (which folder) sometimes its might be no . At all or sometimes 1 2 or 3.