Nie mogę ustawić tła z obrazków w css :(

Question

Cześć! Mam spory problem, który z pewnością jest banalny. Chcę w css-ie wstawić trzy obrazki jeden obok drugiego żeby tworzyły tło elementu "header". Niestety nie potrafię zrobić tak, żeby wszystkie trzy były wyświetlone. Powinno się to zrobić za pomocą "background-repeat" ale wyczerpałam już wszystkie opcje konfiguracji w tym elemencie i nie udało mi się uzyskać pożądanego rezultatu.  Z góry dziękuję za jakąś podpowiedź.

header {
    height: 300px;
    /*    background-color: #5175bc;*/
    background: url("https://cdn.pixabay.com/photo/2017/02/23/16/45/model-car-2092656_960_720.jpg"), url("https://cdn.pixabay.com/photo/2017/02/23/07/33/model-car-2091435_960_720.jpg"), url("https://cdn.pixabay.com/photo/2017/02/24/04/12/model-car-2093893_960_720.jpg"), #5175bc;
    background-size: contain;
    background-repeat: 

}

 

Comments

wstaw cały kod proszę(html), będzie zdecydowanie szybciej..

---

Tak to wygląda w codepen https://codepen.io/raindeer84/pen/mdOxPOy
Dopiero zaczynam uczyć się html i css, dlatego napotykam na takie problemy.

Answer 1

Musisz ustawić pozycje dla każdego obrazka -  lewa,środek,prawa oraz szerokość dla każdego obrazka na 1/3 szerokości kontenera

    background-repeat: no-repeat;
    background-size: 33.33%;
    background-position: left , center, right; 

 

Comments

Dziękuję, zadziałało  A czy można wyskalować jeden obrazek bo jest wyższy od pozostałych?

---

czy można wyskalować jeden obrazek bo jest wyższy od pozostałych?

transform: scale w CSS?

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()

---

@rain.deer,

lepiej wstaw obrazki o tych samych rozmiarach

---

Z pewnością to będzie najłatwiejsze wyjście