Transparent div med repeat-y og topgrafik?

Du må omformulere dit spørgsmål. Det er ikke klart for mig, hvad du vil.

Hvad mener du med, at baggrunden er transparent?

Hvis du vil have en gradient i toppen af din side, så gælder det om at lave et billede, der passer. Lav et billede der har den korrekte gradient, og gør det derefter transparent, så det virker på samme måde som baggrunden.

Hvis du har et link til den side, hvor det sker, vil det være noget nemmere at forstå dit spørgsmål.

  // Steeven

Det er et png billede hvor billedet er 70% gennemsigtig, som vist på http://img690.imageshack.us/img690/139/billede.jpg.
Hvor det til højre, har overlapningsproblemer, da den ydre <div> har gradient bg og den indre <div> har ensfarvet bg med repeat-y

Jeg har brug for en løsning hvor jeg har mulighed for at lave en gradient i toppen (runde hjørner), men samtidigt have en ensfarvet bg på en <div> med indholdet af siden.

På nuværende tidspunkt overlapper de 2 billedet hinanden, se det højre billede, og de runde hjørner er der selvfølgelig ikke grundet den indre <div> baggrundsbillede der har repeat-y.

<b>Er det mulig at lave et offset på hvor et repeat-y billede skal starte med at fylde <div> ud med baggrund ?</b>

Har du fundet svar på dit spørgsmål?

Nej desværre ikke. Hvis du har en løsning vil jeg rigtig gerne høre det?

Dit spørgsmål er stadig svært at forstå. Når du taler om baggrunde, er det svært at se, hvilken baggrund på hvilket element, du mener. At du vil bruge gradient for at få runde hjørner, forstår jeg ikke. Og transparante baggrunde giver ikke meget mening...
Dine billeder er også svære at gennemskue, da de gradienter, det hele handler om, næsten ikke kan ses.

Men altså:
Du vil have et baggrundsbillede til at sidde i toppen. Er det så korrekt forstået, at du har gjort dette baggrundsbillede gennemsigtigt samtidig med at det har en gradient? Og problemet er nu, at gennemsigtigheden ikke fungerer som forventet?

Jeg forstår nemlig heller ikke dette spørgsmål:
Er det mulig at lave et offset på hvor et repeat-y billede skal starte med at fylde <div> ud med baggrund.
Du må nok omformulere en gang mere...

ok, fair nok, jeg prøver igen.Måske dette billede forklare det bedre.
http://img153.imageshack.us/img153/7023/testym.png
(note: glem alt om rumfartsbilledet i baggrunden, den har intet med nedenstående at gøre, det er bare for at illustrer hvad der sker).

Jeg har en div box - med et baggrundbillede (semi transparent lys grå) med repeat-y.

div.contentmain {
    background:url(../images/bgmiddle.png) repeat-y 0px 0px;
}

I toppen af denne contentmain div box vil jeg gerne have en semi transparent (mørke grå til lys grå) gradient.

Problemet er, at når jeg laver en ny divbox inde i contentmain med denne gradient som baggrundbillede, sker der det at de 2 baggrundsbilleder overlapper, som vist på nye billede, og derved at baggrund ikke transparent mere.

Er det muligt at via offset, eller anden metode så baggrundbillede fra contentmain først starter hvor gradienten slutter?

Okay, nu er jeg med. De to transparante lag overlapper, og derved gøres farven dobbelt så 'tykt', så det transparante forsvinder.

Det, du så beder om, er en metode, der sørger for, at baggrunden først begynder en bestemt afstand nede på boksen, således at der ikke er noget, der overlapper.
Med ren CSS kan dette ikke lade sig gøre. Hvis først du har sat repeat-y til, og billedet gentages lodret, så gælder det både opad og nedad uendelig langt.

Hvis du ved hvor stor boksen er, eller du i hvert fald ved, hvor stor den maksimalt kan blive, så kan det lade sig gøre ved at fifle lidt med billederne. Her er et forslag:

Find ud af, præcis hvilken højde top-baggrundsbilledet med gradienten har.
Lav så et nyt baggrundsbillede til boksen, som er én pixel bredt og netop så højt, at det kan starte fra bunden af top-baggrundsbilledet og fylde mindst resten af boksen ud nedad. Det vil altså sige, at dets højde skal være boksens højde minus top-baggrundsbilledets højde.
Når du har dette baggrundsbillede klar, bruger du nu denne CSS:


Dér, hvor der står ???px skal du indsætte top-baggrundsbilledet præcise højde. Derved startes boksens baggrund i forlængelse af toppens gradient.

Hvis du ikke kender de højder eller boksen størrelse, må du bruge noget javascript, og så må du stille dette spørgsmål i en anden kategori.