Nie działający background-image

pytanie zadane 20 września 2016 w HTML i CSS przez wgnsy123 Początkujący (410 p.)

Witam, otóż nie działa mi wyświetlanie obrazka :/

#logo
{
	margin: 0px;
	padding: 0px;
	width: 100%;
	color: white;
	text-align: center;
	background: #ffffff;
	background-image: url('img/portfolio.jpg');
	
}

CSS jest w folderze głównym, a w głównym jest folder "img" w którm jest owe zdjęcie.

komentarz 20 września 2016 przez Pietrak Pasjonat (18,850 p.)

Podejrzewam, że #logo nie ma zawartości, przez co wysokość wynosi 0.

komentarz 20 września 2016 przez wgnsy123 Początkujący (410 p.)

Faktycznie, nie ma zawartości, wpisałem coś i niby sie wyswietla troche, ale jak zrobić, żeby po prostu wyświetliło obraz? bez żadnych cudeniek co do ustawiania konkretnej wysokosci.

komentarz 20 września 2016 przez Pietrak Pasjonat (18,850 p.)

ustaw

#logo

{

....

height: wysokoscObrazka;

}

komentarz 20 września 2016 przez wgnsy123 Początkujący (410 p.)

Już to zrobiłem, ale choć ustawiłem przeciez width: 100% to i tak obrazek ucina sie ;/

komentarz 20 września 2016 przez Pietrak Pasjonat (18,850 p.)

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

cover, contain

komentarz 20 września 2016 przez wgnsy123 Początkujący (410 p.)

Nie rozumiem zbytnio...

komentarz 20 września 2016 przez wgnsy123 Początkujący (410 p.)

Ani to, ani to nie pomaga.

komentarz 20 września 2016 przez wgnsy123 Początkujący (410 p.)

Po prostu chce efektu jakbym dal do diva obrazek i width 100%, zeby mi sie skalowało fajnie z rozdzielczością, nie mnożyło. Tylko, że w divie miałem błędy z paddingiem itp. to chce to w cssie zrobic.

komentarz 21 września 2016 przez niezalogowany

Dodawanie rozciągających się styli bardzo żadko "skaluje fajnie". Polecam pozytać o tagach HTML5 <figure> i <picture> . Wzbogacą stronę i upiększą zdjęcia ;)

12 odpowiedzi

odpowiedź 20 września 2016 przez Barttyyy Gaduła (4,680 p.)

odpowiedź 20 września 2016 przez Ares Obywatel (1,560 p.)

 background-image: url('../img/portfolio.jpg');

spróbuj tak u mnie to zawsze pomaga

komentarz 20 września 2016 przez wgnsy123 Początkujący (410 p.)

Nie działa.

komentarz 20 września 2016 przez Ares Obywatel (1,560 p.)

 background: url('../img/portfolio.jpg') no-repeat center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;

Ja w ostatnim swoim projekcie miałem coś takiego i nie miałem żadnego problemu może warto spróbować

komentarz 20 września 2016 przez wgnsy123 Początkujący (410 p.)

Nie działa, ucina obraz przy mniejszej rozdzielczości.

odpowiedź 20 września 2016 przez Mati Gaduła (3,390 p.)

Jeżeli chcesz wyświetlać obrazek stale jak nie masz nawet treści musisz dodać jego wysokość np. nawiązując do twojego kodu

#logo
{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 500px;
    color: white;
    text-align: center;
    background: #ffffff;
    background-image: url('img/portfolio.jpg');
    background-size: cover;
}

Możesz też spróbować background-size: 100% 100%; ale to nie będzie dobrze wyglądać.

Jeżeli chcesz obrazek wielkosci na całą wyświetlaną stronę, sekcję zrób tak: height: 100vh;

Pokaż 10 poprzednich komentarzy

komentarz 20 września 2016 przez wgnsy123 Początkujący (410 p.)

Malo czasu mam :/

komentarz 20 września 2016 przez wgnsy123 Początkujący (410 p.)

Działa to tak średnio, bo jak dam za małe okno to ucina. Na prawde się nie da tego zrobić jak ten jeden obrazek co mam w html? czyli to?

  <img src="img/omnie.jpg" style="width: 100%;"></img>

komentarz 20 września 2016 przez wgnsy123 Początkujący (410 p.)

A i sory, nie działa to w ogóle co podałeś, ucina obraz i jak jest troszeczke mniejszy od mojej rozdzielczosci ekranu, jak jest wielkosci ekranu telefonu, po prostu klapa.

komentarz 20 września 2016 przez wgnsy123 Początkujący (410 p.)

Jak coś to pisz co moze pomóc, ja ide leżeć bo mi głowa z nerwów ekspoduje jak nic do k.. nędzy nie chce działać...

komentarz 20 września 2016 przez Mati Gaduła (3,390 p.)

Musisz trochę pomyśleć za pomocą tego sposobu co ci podałem da się to zrobić. Zobacz masz ustawione sztywno height: 755px; a na mniejszej rozdzielczości jest to strasznie duża wysokość i jak ma wypełnić to całe to się albo rozciągnie, albo utnie część tła. Musisz zmniejszać wysokość wraz z zmniejszaniem się rozdzielczości i będzie to dobrze wyglądało.

odpowiedź 21 września 2016 przez Michał Samolewski Bywalec (2,240 p.)

odpowiedź 21 września 2016 przez NieWidziMiSie Nowicjusz (200 p.)

odpowiedź 21 września 2016 przez HaKIM Szeryf (87,590 p.)

Łap:

~ http://codepen.io/HaKIMus/pen/rrWAzm

no-repeat jest odpowiedzialny za te Twoje powielanie obrazka.

komentarz 21 września 2016 przez wgnsy123 Początkujący (410 p.)

Ucina obraz, ucina...............

komentarz 21 września 2016 przez HaKIM Szeryf (87,590 p.)

Podeślij ss'a.

Ucina obraz mało mi mówi.

komentarz 21 września 2016 przez wgnsy123 Początkujący (410 p.)

No to tak jakbyś dał obrazek, zmniejszył przeglądarke i po prostu obraz by się uciał do zmniejszonego okienka.

Nie mam teraz możliwości zbytnio zrobienia ssa.

odpowiedź 21 września 2016 przez Cinnamon Użytkownik (640 p.)
edycja 21 września 2016 przez Cinnamon

Spróbuj może tak

background-image: url('img/portfolio.jpg');
background-repeat: no-repeat; /*Nie powtarzaj*/
background-size: cover /*Tło dopasowuje się do wielkości okna*/
background-position: center; /*Wyśrodkowanie obrazka*/
background-attachment: fixed; /*by obrazek tła się nie przewijał z zawierającym go blokiem*/

U mnie takie kombo pomogło ;)