Obrazek jako cały div o szerokości 100% + dodanie przycisków.

pytanie zadane 5 listopada 2016 w HTML i CSS przez Jakub Ruść Nowicjusz (160 p.)

Witam serdecznie!

Aktualnie pracuje nad swoim pierwszym projektem strony internetowej wraz z połączeniem z bazą danych. Aktualna zagadka której nie mogę rozwiązać leży po stronie css/html. Otóż chciałbym aby w divie o nazwie banner znalazł się obrazek na całą szerokość strony oraz na 500px wysokości (tj. jako tło), ponieważ później chciałbym zamieścić w środku tego diva trzy buttony.

Dla lepszego zobrazowania podsyłam obrazek z painta jak ja to widzę:

http://i.imgur.com/WugA4GW.png

Obrazek:

http://www.margherita.pl/shared_assets/images/backgrounds/pizza/pizza7.jpg

Aktualny plik ze stronką:

http://www46.zippyshare.com/v/2mSVrtXJ/file.html

3 odpowiedzi

odpowiedź 5 listopada 2016 przez skav3n Gaduła (3,900 p.)

Użyj `background-size: cover`

.baner {
  background-image: url('http://www.margherita.pl/shared_assets/images/backgrounds/pizza/pizza7.jpg');
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

http://codepen.io/anon/pen/NbPxzE

komentarz 5 listopada 2016 przez Jakub Ruść Nowicjusz (160 p.)

Dziękuję... to zdecydowanie mi pomogło :)

odpowiedź 5 listopada 2016 przez xmentor Nałogowiec (49,520 p.)

https://developer.mozilla.org/pl/docs/Web/CSS/background-image

komentarz 5 listopada 2016 przez Jakub Ruść Nowicjusz (160 p.)

Dobrze, to akurat dokładnie wiem jak użyć. Ale pytanie jest moje, aby zrobić to na 100% szerokości. Tak aby obrazek był rozciągnięty jak teraz jest w projekcie (z tym że aktualnie nie znajduje się on w divie). Próbowałem robić za pomocą background-image, ale wtedy obrazek zachowywał wyjściowe wymiary.

komentarz 5 listopada 2016 przez xmentor Nałogowiec (49,520 p.)

użyj dodatkowo background-size

komentarz 5 listopada 2016 przez Jakub Ruść Nowicjusz (160 p.)

boli mnie strasznie, bo jak zrobię background-size to ten obrazek cały czas się będzie skalował, a mi zależy żeby był cały czas stały. :/

komentarz 5 listopada 2016 przez Jakub Ruść Nowicjusz (160 p.)

Chciałbym żeby to wyglądało podobnie jak tutaj: https://serwis.eu/strony/demo50/

komentarz 5 listopada 2016 przez xmentor Nałogowiec (49,520 p.)

dodaj jeszcze:

background-position: center center;

komentarz 5 listopada 2016 przez pablop76 VIP (123,580 p.)

Witam. Dałeś przykład to zobacz jak to jest zrobione :)

.l-section-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-position: center center;
    background-size: cover;
}

komentarz 5 listopada 2016 przez Jakub Ruść Nowicjusz (160 p.)

Dokładnie tak... już wszystko zrobione! :)

komentarz 5 listopada 2016 przez pablop76 VIP (123,580 p.)

Fajnie, że pomogło :)

odpowiedź 5 listopada 2016 przez Abel Mądrala (5,140 p.)

Ustaw wysokość i szerokość temu div-owi a obrazek wstaw jako jego tło

background-image:url('url_do_obrazka');

Buttony umieść w tym div-ie i po kłopocie

komentarz 5 listopada 2016 przez Jakub Ruść Nowicjusz (160 p.)

W wypadku gdy będzie to wyglądać tak:

#banner {
	width: 100%;
	height: 550px;
	background-image: url(images/pizza7.jpg);
	background-repeat: no-repeat;
}

obrazek nie rozciągnie mi się na całość strony, a nie chciałbym aby on się powtarzał.. zatem jak? :)

komentarz 5 listopada 2016 przez Abel Mądrala (5,140 p.)

<html>
<head>
</head>
<body>
<div class="baner"></div>
</body>
</html>

body{
width:1000px;
}
.baner {
  width: 100%;
    height: 550px;
    background-image: url('http://www.margherita.pl/shared_assets/images/backgrounds/pizza/pizza7.jpg');
 background-repeat:no-repeat;
        background-size:100% 100%;
}

Div z obrazkiem powinien się rozciągnąć na całą szerokość body