• 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,656 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,120 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,120 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 536 wizyt
pytanie zadane 14 lutego 2017 w HTML i CSS przez remo82 Użytkownik (560 p.)
0 głosów
4 odpowiedzi 500 wizyt
pytanie zadane 28 stycznia 2016 w HTML i CSS przez Mavimix Dyskutant (8,390 p.)
0 głosów
1 odpowiedź 161 wizyt
pytanie zadane 10 stycznia 2019 w HTML i CSS przez Uzytkowniczka Nowicjusz (220 p.)

92,558 zapytań

141,407 odpowiedzi

319,569 komentarzy

61,945 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...