Hallo iedereen!

Ik heb een content vak waarbij de achtergrond een plaatje is die gradient gevuld is.
Nou wil ik als het gradient vak ophoud dus zeg maar aan de 500px oid is met tekst dat die achtergrond doorloopt in de laatste vaste kleur. Nou zie ik dit op allerlei websites en heb hier vaak naar gezocht. Ik heb alleen geen idee hoe dit heet of hoe dit werkt dus kan ik het probleem niet oplossen!

Ik hoop dat dit voldoende informatie is anders hoor ik het ook graag!

Met vriendelijke groet,
Robin

Met CSS moet dat makkelijk lukken.

#box {

// Background image instellen
// Background x-repeat instellen
// Background-color instellen

}

Background img is 1 x 500 px lange afbeelding die in de x as wordt herhaal
De color is de laatste kleur van de gradient.

background: #(kleurcode) url(' afbeelding ') repeat-x;
In je css code.

Nou had ik er kleur neer gezet omdat ik dacht dat zal wel het zelfde werken maar eigenlijk is het een afbeelding. Kan ik het dan ook zo doen:


#box {

// Background image instellen
// Background x-repeat instellen
// Background image instellen (de volgende dus?)

}

Na wat verder gezocht te hebben zag ik wel dat dat pas vanaf css 3.0 kan
Maar ik weet niet als dit klopt

Post eens een voorbeeld, wellicht brengt dat helderheid.

M Veen heeft het antwoord al gegeven....

Ervan uitgaande dat de gradient gewoon een repeat-x heeft en dat de laatste kleur in deze gradient #fff is:

#box { background:#fff url(plaatje.png) repeat-x; }

>> dit geeft dat in #box de achtergrond over de breedte wordt gerekt en daar waar deze aan de onderkant aan zijn einde is de achtergrondkleur #fff te zien is. Let op: géén aanhalingstekens in url(), de locatie van de afbeelding is relatief aan de positie van je *.css.

Let op: géén aanhalingstekens in url(), de locatie van de afbeelding is relatief aan de positie van je *.css.

Nooit last van gehad, maar zou best kunnen kloppen ;-)

Dat was niet wat ik bedoelde.
Hier een voorbeeld van zoals het niet moet met uitleg hoe het wel moet:

Dat dacht ik ookal.
Dan zit ik alleen met het feit dat de div niet verder uitrekt dus dan zal het 1 heel groot plaatje moeten worden. Het probleem is dat het voor iemand anders is. Voor mezelf had het niet veel uitgemaakt.
Is het ook mogelijk een soort "faux columns" te gebruiken?

Groeten,
Robin

Dan worden het 3 divs:
- bovenkant: no-repeat center top
- middenstuk: repeay-y center
- onderkant: no-repeat center bottom

Omdat 3 div's niet zo netjes is zou je er ook voor kunnen kiezen om de paragraaf waar de tekst in staat te voorzien van een achtergrond.

De html word dan als volgt;

Code:

<div class="item_middle">
<div class="item_top">

   <p>
             tekst
   </p>

</div>
</div>

De css ervan komt er ongeveer zo uit te zien:

Code:

.item_middle {
   background:url('images/middle.png') repeat-y center top;
   margin:10px 0 0; /* eventueel hier een margin instellen */
}
.item_top {
   background:url('images/top.png') no-repeat center top;
}
.item_top p {
   background:url('images/bottom.png') no-repeat center bottom;
   padding:10px; /* eventueel hier de padding instellen */
}

Aanhalingstekens mogen wel gewoon, persoonlijk vind ik dit netter.

Als diegene waar het voor is dan in de cms tekst invoert.
Hoe kan ik er dan voor zorgen dat die automatisch doorloopt?
Of moet ik dan gewoon de overflow aanzetten?

@Jeffrey
Niet gezegd dat het fout is.

@Robin
Ik zou het gewoon met 3 divjes doen (zoals Gijsbert ook al zei).
Éen met de bovenkant, een met content (repeat Y) en een met de onderkant.

<div class="top"></div>
<div class="content">
<ul>
<li>test</li>
</ul>
</div>
<div class="footer"></div>

Dat randje is toch gewoon een normale border, of zie ik dit verkeerd?

Je kan het inderdaad ook met 3 divjes doen, of met -moz-border: maar volgens mij werkt dit alleen in Firefox..

Dankjulliewel het is gelukt!

Alleen het onderste stuk nog niet. Nou heb ik daar een tijdje mee zitten prutsen maar ook dat lukt me niet zonder hulp:$

en ik heb nog een vraag. Kent iemand hier een handig script zodat als je in de header op een volgende knop drukt dat je dan de volgende header ziet?

Ik denk dat je dat het beste met jQuery kan oplossen, weet niet of je dat wilt? Met HTML/CSS word het denk ik een lastig verhaal