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

Nie działający background-image

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
1,461 wizyt
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.)
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

0 głosów
odpowiedź 20 września 2016 przez Barttyyy Gaduła (4,680 p.)
A plik .html?
0 głosów
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.
0 głosów
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;

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.
0 głosów
odpowiedź 21 września 2016 przez Michał Samolewski Bywalec (2,240 p.)

Spróbuj zamiast apostrofów użyć cudzysłowie.

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

Ja tak zawsze robie i działa.

0 głosów
odpowiedź 21 września 2016 przez NieWidziMiSie Nowicjusz (200 p.)

Ja nawet nie wstawiam, ani apostrofów, ani cudzysłowia i wszystko działa

Co do wielkości ustawiam taki parametr:

background-size: cover;

Co do szerokości i wysokości w ogóle nie zaznaczam tego.

 

0 głosów
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.
0 głosów
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 ;)

komentarz 21 września 2016 przez wgnsy123 Początkujący (410 p.)
Ucina obraz ciągle na mniejszej rozdzielczości zamiast skalować do wielkości okna jak np. w divie.
0 głosów
odpowiedź 21 września 2016 przez Filip2248 Dyskutant (8,840 p.)
W div'ie #logo dodaj background-size: 100%;
komentarz 21 września 2016 przez wgnsy123 Początkujący (410 p.)
Nie działa, ucina ciągle, nawet na fullscreenie, boże co za bajzel.
0 głosów
odpowiedź 21 września 2016 przez wgnsy123 Początkujący (410 p.)
Dalej nic z powyższych nie pomogło, obraz nawet na full-screenie ucina dół, boki, a o mniejszej rozdzielczości już nie wspomne jak sie wszystko wali...
0 głosów
odpowiedź 21 września 2016 przez Al Capone Obywatel (1,230 p.)
A rodzice #logo są ustawione na 100% width i height? Ustaw html, body na 100%.
0 głosów
odpowiedź 21 września 2016 przez wgnsy123 Początkujący (410 p.)
Dodanie: padding-top: 45%; pomaga,ale nie wiem dlaczego :/
0 głosów
odpowiedź 23 września 2016 przez SamSam Obywatel (1,120 p.)
Witam,

ja raczej bym sprawdził rozszerzenie pliku, jpg czy png ?

może tam tkwi problem?

i ogólnie poszukaj literówek, nie koniecznie w kodzie ale w folderze w którym masz zdjęcie.

aha dlaczego ustawiasz kolor i tło skoro jest to zdjęcie?

Podobne pytania

0 głosów
1 odpowiedź 121 wizyt
pytanie zadane 9 stycznia 2017 w HTML i CSS przez Jakub Domacki Użytkownik (660 p.)
0 głosów
2 odpowiedzi 456 wizyt
pytanie zadane 16 grudnia 2015 w HTML i CSS przez tirex Gaduła (4,430 p.)
0 głosów
1 odpowiedź 434 wizyt
pytanie zadane 28 kwietnia 2023 w C# przez marcin20a Początkujący (280 p.)

93,103 zapytań

142,075 odpowiedzi

321,554 komentarzy

62,444 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...