Problem z background-image: url()

Question

Witam,
Chciałem zrobić div'a i jako tło ustawić obrazek, ale po dodaniu zdjęcie, ono się nie dopasowało do wielkości div'a.
Więc moim pytaniem jest: Jak ustawić automatyczne dopasowywanie się obrazka do div'a niezależnie od wielkości danego zdjęcia

 

<div class="user-avatar"></div>

.user-avatar {
  background-image: url(img/avatar.png);
  width: 100px;
  height: 100px;
  box-shadow: 0 0 5px #000;
  border-radius: 7px;
}

 

Answer 1

Kombinacja:

background-size: contain;
background-repeat: no-repeat;

powinna pomóc.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Comments

działa, dziękuję :)

---

Wiele innych rzeczy nie dało się tu zrobić, link do dokumentacji jest - oznaczyłem odpowiedź jako najlepszą. Warto o tym pamiętać - myślę, że to zawsze mała dawka motywacji do dalszej pomocy :)

---

Racja, zapomniałem, że taka funkcja w ogóle istnieje. Następnym razem jak ktoś mi pomoże to oznaczę odpowiedź jako najlepszą :)

---

@radek024,

O a ja mam pytanie do Pana, czy Byki w Kodzie będą rozwijane, bo zauważyłem, że blog został w 2019 roku?

---

Będą jak najbardziej. W tym momencie przebudowałem już układ bloga, po obronie pracy dyplomowej ruszam na nowo z publikacjami :)