[CSS] Jak powtórzyć tło

Witam!

Nie uczyłem się CSS ale potrzebuje w nim coś zrobić.

Mam 2 obrazki… i chce by jeden się nigdy nie powtarzał,

a drugi gdy przybędzie treści…

Coś takiego jak tutaj: Screen

Pozdrawiam i proszę o pomoc!

witam

dla każdego obrazka musisz zrobić osobną class-ę albo id

te obrazki mają być jako background?

jeżeli tak to w przypadku 1 -go który ma być nie powtarzany to w deklaracji wpisujemy

{

no-repeat;

}

dla powtarzalnego w pionie

{

repeat-y;

}

Można również tak: :smiley:

div#example {

background-image: url(url_img01);

background-repeat: repeat-y;

width: 200px; /*Szerokosc slupka*/

padding-top: 20px; /*Wysokosc img01*/

}

div#example div#example {

background-image: url(url_img02);

background-repeat: no-repeat;

}

Tresc

[/code]

Robię tak samo:

#jeden {

	height: 32px;

	margin: 0 auto;

	padding: 0;

	background: url(images/img02.jpg) no-repeat left;

}

#dwa {

	margin: 0 auto;

	padding: 0;

	background: url(images/img06.jpg) left repeat-y;

}

Html

TrescEloGanja

[/code]

Ale tworzy się taki efekt:

22971jeden.png

dlatego, że ustawiłeś wysokość na sztywno 32px dla pierwszego div’a a drugi jest pusty i go nie widać

Dodane 18.05.2010 (Wt) 12:45

No dobrze, ale jeśli zrobię tak jak mówisz wtedy nie wyświetli pierwszego DIVa.

A ja chce żeby tekst był w pierwszym, a jeśli go przekroczy tło będzie z drugiego.

Polecam popatrzeć na jakiś kurs CSS bo to na prawdę jest banalne i zamiast czekając na odpowiedz samemu się dojdzie odpowiedzi.

Możesz zrobić takie coś za pomocą tabeli jeżeli nie chcesz się uczyć CSS.

Zamień kolejnością div’y (lub id w css)

Tresc Elo Ganja

[/code] albo wydziel część tekstu do pierwszej linii:

[code]
Tresc
Elo Ganja

W sumie to można podzielić treść tak jak na schemacie w pierwszym poście (nagłówek i reszta tekstu) i bez zagnieżdżenia ustawić div’y jeden pod drugim. A jeśli cała treść ma być razem to można to również rozwiązać w jednym divie z użyciem wielu teł (co prawda to CSS3, ale większość nowych przeglądarek już to wyświetli)

#jeden {

	background-image: url(obrazek1.jpg), url(obrazek2.jpg);

	background-repeat: no-repeat, repeat-y;

}