Live
x
<html> <head> <title>Size</title> <style> div { height: 300px; margin: 20px; border: 3px dashed red; background-image: url(https://cdn.pixabay.com/photo/2020/02/05/06/24/cat-4820202_960_720.jpg); } div.one { /* Zrób wszystko, żeby zapełnić całą powierzchnię. Często stosowane wraz z "background-position" w celu prawidłowego wyrównanie przyciętego obrazu. */ background-size: cover; /* background-position: center center; */ } div.two { /* Wyświetl całą grafikę, nawet jeżeli spowoduje to niewypełnienie całego tła. Jeżeli tło nie jest wypełnione, to grafika jest dublowana, dlatego też często używane razem z właściwością "background-repeat". */ background-size: contain; /* background-repeat: no-repeat; */ } div.three { /* Ustaw szerokość na 300px i dobierz wysokość tak, aby zachowac proporcje obrazu. */ background-size: 300px; /* background-repeat: no-repeat; */ } div.four { /* Samodzielnie ustaw wysokość i szerokość, nawet jeżeli spowoduje to zniekształcenie grafiki. */ background-size: 300px 400px; /* background-repeat: no-repeat; */ } </style> </head> <body> <pre>background-size: cover 👇</pre> <div class="one"></div> <pre>background-size: contain 👇</pre> <div class="two"></div> <pre>background-size: 300px 👇</pre> <div class="three"></div> <pre>background-size: 300px 400px 👇</pre> <div class="four"></div> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.