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

Plik psd jako background

VPS Starter Arubacloud
0 głosów
220 wizyt
pytanie zadane 14 października 2017 w HTML i CSS przez Apper97 Obywatel (1,380 p.)
Witam.

Moj problem polega na tym, ze mam plik psd do uzycia backgroundu w moim kodzie., Gdy go ustawiam chyba cos jest nie tak, lub ja nie ogarniam tematu. W oryginale powinno to wygladac tak:

https://devdave93.github.io/Weekly-WebDev-Challenge/

natomiast u mnie wyglada to tak:

https://scr.hu/k8D8nw

Czyli jakby troche zeszlo w dol, gdy natomiast dodam margin top i bottom po 400px to obraz sie przesuwa. Tak jakby byl dopasowany do tresci. Ale jednak wyswietla mi sie ta niebieska czesc, a powinno byc inaczej. Moj kod w css wyglada tak:

html body {
    background: url(1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

1 odpowiedź

+1 głos
odpowiedź 14 października 2017 przez imklau Nałogowiec (42,090 p.)
wybrane 14 października 2017 przez Apper97
 
Najlepsza
jak margines dodajesz to normalne że się przesuwa ;)

ale zauważ, że na stronie, którą pokazałeś jest scroll, bo ta strona jest dłuższa, więc jak i Ty będziesz mieć tam więcej streści to trochę inaczej to powinno się rozłożyć ;)
komentarz 14 października 2017 przez Apper97 Obywatel (1,380 p.)
czyli nie przejmowac sie i dodawac swoje elementy?
komentarz 14 października 2017 przez imklau Nałogowiec (42,090 p.)
możesz ustawić jakiś przykładowy height i zobaczyć, jak to będzie wyglądać ;)
komentarz 14 października 2017 przez Apper97 Obywatel (1,380 p.)
przy dodawaniu tekstu robi mi sie cos takiego:

https://scr.hu/jZDm6v

jak temu zapobiec? A gdy dodam height to faktycznie obraz sie dopasowywuje. Tylko, ze jak mam to zrobicm zeby zaczac od gory obrazu(backgroundu) nie wiem ile przeciez mam dac heighta, czy moze dodac height:auto? I zaczac prace?
komentarz 14 października 2017 przez imklau Nałogowiec (42,090 p.)
Ten height to tak tylko przykładowo, żeby tylko zobaczyć czy na pewno będzie ok. Usuń go i pracuj sobie dalej ;)

Co do tego drugiego problemu to usuń to html i zostaw tylko dla body te rzeczy związane z tłem i najlepiej daj jakiegoś diva z klasą wrapper i nadaj mu max-width powiedzmy 1200px + margin: 0 auto; i w środku wstawaj resztę elementów. On będzie Ci to wszystko razem trzymał ;)
komentarz 14 października 2017 przez Apper97 Obywatel (1,380 p.)
niestety znowu jest to samo, biale tlo rozciaga sie po szerokosci obok backgroundu mojego.

html:

 <div class="wrapper">
       <h1>NIDWIDHIWHDIWHDIWHIDHWIDHIWHDIWHDIHidhiwdhiwhdihwdhiwhdihwidhiwhdihwidwhidhi</h1>
        </div>

 

css:

body {
    background: url(1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.wrapper {
    max-width: 1200px;
    margin:0 auto;
}
komentarz 14 października 2017 przez imklau Nałogowiec (42,090 p.)
ten tekst nie ma w sobie żadnych przerw, więc no przeglądarka nie podzieli Ci z automatu takiego długiego wyrazu i nie doda - dzieląc ten wyraz :P

wszystko jest ok już chyba;)

Podobne pytania

0 głosów
2 odpowiedzi 176 wizyt
pytanie zadane 14 września 2017 w HTML i CSS przez Tomson Początkujący (440 p.)
0 głosów
1 odpowiedź 289 wizyt
pytanie zadane 8 stycznia 2018 w HTML i CSS przez niezalogowany
+1 głos
1 odpowiedź 292 wizyt
pytanie zadane 29 maja 2021 w HTML i CSS przez bazyl8796 Obywatel (1,020 p.)

92,455 zapytań

141,263 odpowiedzi

319,100 komentarzy

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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...