Tło na całą długość strony - jak?


(TheMegaCherry) #1

Witajcie,

Mam pewną stronkę na której chciałbym zastosować div, który będzie tłem na całą długość strony.
Przedstawiłem to kolorem “żółtym” na poniższym obrazku:

Jak to zrobić?


(gosciuW7) #2

#reapeat-xy

www.kurshtml.edu.pl/css/powtarzanie,tlo.html


(TheMegaCherry) #3

Możliwe, że źle mnie zrozumiałeś, ale tło ma być jednolitym kolorem nadanym w CSS’ie a nie zdjęciem :wink:
Dodałem to co podałeś, lecz stale jest ten samem efekt, że tło jest rozciągnięte do dołu lecz nie jest całkiem podciągnięte do góry, gdyż jest odstęp z 30px od góry :frowning:


(gosciuW7) #4

napewno tworząc diva dałeś za duży odstęp… Niestety nie pomogę na odległość ani z głowy ostatnio pisałem na potęgę w Listopadzie 2016 dzień po dniu i coś mi wychodziło.
Kurs z linku to nie tylko jeden przykład str wcześniej masz kolory !
znajdziesz tam kolorki, ramki suwaki,div zwykły, div z ramkami,div transparetny,pole logowania, galeria zdjęć, pole komentowanie, gotowy wzór wyglądu strony w css(jeden baner+ lewe menu+środek+stopka. Przejrzyj wszystko !!

Ps1.A jak się wnerwisz to wpisz w gogl free szablony www paczka rar będzie zawierała pro wyglądający gotowiec (plik html + css + grafiki i czasem elementy ruchome js javascript)

Ps2.jestem pewny że znasz opcje ppm (prawy przycisk myszy) pokaź źródło strony lub zapisz źródło strony Fb ma w sobie około 60 divów, ale wygląd jest dobry nie za ciasne idealnie. I tak się człowiek uczy.


(TheMegaCherry) #5

Stronę mam wręcz gotową i mam tylko z tym problem.
Pytałem się o tą jedną tylko rzecz, a nie że od razu chce wertować cały kurs HTML / CSS…
Najwidoczniej trudno pomóc, a lepiej odsyłać na kursy…


(Piesek64) #6

Coś w rodzaju

width: 50vw;
margin: 30px auto 0;

na div z tłem powinno raczej działać.


#7

Spróbuj usunąć margines górny dla tego diva?

div {margin-top: 0}

a odstęp by tekst zaczynał się niżej w żółtym divie dodaj marginesem wewnętrznym:

div {padding-top: 30px}

A jak ten wewnętrzny margines robi to co chcesz wyeliminować to ustaw go na 0.
to zniweluje duży żółty pasek przed tekstem na początku.



W sumie kilku pikselowy margines z body też to może powodować, nie każdy używa normalize / reset css.



To 30 px według mnie robiłoby wtedy ten niechciany efekt:

lecz nie jest całkiem podciągnięte do góry


(Fizyda) #8

Jeśli masz taką strukturę swojej strony:

<body>
	[zawartosc strony]
</body>

to musisz zrobić coś takiego:

<body>
	<div class="wrapper">
		[zawartosc strony]
	</div>
</body>

dla body dajesz ciemny kolor, nie możesz mieć tutaj żadnych dopełnień ani marginesów, Dla wrappera ustawiasz kolor jaki chcesz i tutaj dodajesz ewentualnie dopełnienia, ale tylko dopełnienia.