Plik psd jako background

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ź

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;)