• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Object Storage Arubacloud
0 głosów
1,690 wizyt
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

+1 głos
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 :)
0 głosów
odpowiedź 5 listopada 2016 przez xmentor Nałogowiec (49,520 p.)
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,180 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,180 p.)
Fajnie, że pomogło :)
0 głosów
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

Podobne pytania

0 głosów
2 odpowiedzi 543 wizyt
pytanie zadane 14 lutego 2017 w HTML i CSS przez remo82 Użytkownik (560 p.)
0 głosów
4 odpowiedzi 518 wizyt
pytanie zadane 28 stycznia 2016 w HTML i CSS przez Mavimix Dyskutant (8,420 p.)
0 głosów
1 odpowiedź 164 wizyt
pytanie zadane 10 stycznia 2019 w HTML i CSS przez Uzytkowniczka Nowicjusz (220 p.)

92,677 zapytań

141,581 odpowiedzi

320,061 komentarzy

62,039 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...