如何制作背景尺寸：从左侧切割封面？

Question

Consider this simple W3 School background image example, I changed its background-size to cover .

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size

If shrinking the page, you can see that the mountain image starts to cut from right to left. I wonder if I could change this effect to cut from left to right? Ie when cutting starts, the left side gets cut off first.

Answer 1

You can use background-position: right; to set the origin of the background-image to the right side of the container:

 #example1 { border: 2px solid black; padding: 25px; background: url(https://placehold.it/1000x100); background-repeat: no-repeat; background-size: cover; background-position: right; }

 <div id="example1"> <h2>Hello World</h2> <p>The background image is displayed in its original size.</p> </div>

You can also use the background shorthand property to solve this:

 #example1 { border: 2px solid black; padding: 25px; background: url(https://placehold.it/1000x100) no-repeat right / cover; }

 <div id="example1"> <h2>Hello World</h2> <p>The background image is displayed in its original size.</p> </div>