Transparenten Hintergrund ?

[Niklas]

Hallo,

Ich erstelle grade eine neue Webseite und möchte einen leicht Transparenten Hintergrund (c.a 10-15 px Breiter als die Seite) wie hier wie bekomme ich das hin ?

Es ist ja ein bisschen schwerer, da man nie weiß wie viel Content eine Seite besitzt und somit nicht die länge einschätzen kann!

Gruß Niklas

 

[cobrastyle]

photoshop ^^

 

[Niklas]

Wie Photoshop ?

Ich weiß wie ich einer Grafik eine Transparente umrandung geben, nur es ist ja ein bisschen schwerer, da man nie weiß wie viel Content eine Seite besitzt und somit nicht die länge einschätzen kann!

Deswegen kann ich keine Grafiken verwenden!

 

[Space Vampire]

ieso kannst du keine Grafiken verwenden? Die Seite, die du als Beispiel anführst, tut es doch auch.

 

[threadi]

Bei transparenten Flächen hast Du immer 4 Möglichkeiten:
- eine transparente Grafik als Hintergrundgrafik einbinden. Diese kann per CSS auch beliebig oft wiederholt werden, in beliebiger Richtung. Nachteile gibt es dabei keine, außer vlt. die fehlende Unterstützung für alphatransparente Grafiken bei älteren Browsern.
- ein Element, welches per CSS mit opacity bzw. filter:alpha() transparent gemacht wird. Nachteil: dieses Element müsste absolut in den Hintergrund gelegt werden, parallel zu dem Element welches die eigentlichen Inhalte beinhaltet. Das geht nicht in jedem Fall und erhöht den Aufwand.
- eine transparente Grafik per img-Element eingebunden und absolut positioniert. Selbe Nachteile wie bei der 2. Variante.
- die CSS-Eigenschaft rgba() .. versteht nur nicht jeder Browser.

Du siehst: Grafikerstellung ist das einfachste in dem Fall. Wenn Du eine solche Datei erstellen willst und der Content beliebig lang sein könnte, dann erstelle nur eine Grafik die in der X- oder Y-Achse wiederholt wird. Wenn Du Rundungen brauchst, erstelle diese extra und positioniere sie entsprechend.

 

[Niklas]

ieso kannst du keine Grafiken verwenden? Die Seite, die du als Beispiel anführst, tut es doch auch.

Ich weiß nicht wie ich das machen soll, da die Seite ja nicht immer die gleiche länge besitzt ja nach dem wieviel Text u.s.w

Wie wiederhole ich das mit der X- oder Y-Achse ? Und genau in dem Bereich ?

 

[mermshaus]

Hier in #7 habe ich ein Beispiel gepostet:

- http://www.html.de/css/31686-runde-ecken-bei-variabler-groesse.html

Die Bilder sind inline deklariert, aber du kannst natürlich genauso gut auch echte Grafiken verwenden.

Vom Markup her mag es schickere Ansätze geben.

 

[Niklas]

http://www.html.de/css/31686-runde-ecken-bei-variabler-groesse.html

Verstehe ich leider gerade garnichts !

Ich würde sagen wir lassen erstmal die runden Ecken weg und versuchen mal einen einen Hintergrund zu machen, der mit der Seite mitwächst! Aber auch schon mit Grafik, meine Frage ist: Wie mache ich es das die Tranzparente Ebene genau so groß ist wie die Seite bei viel Text genauso wie bei wenig!

Ich kenne das grade nur ein bisschen mit Hintergrundgrafiken und X-Y wiederholungen !

Edit: Es wurde auch gehen wen die "Schriftbox" eine leicht Tranzparente umrandbung bekommt!

<div id="box2"><p>Hier kommt der text</p></div>

#box2 {
width: 910px; 
float:right; 
margin: 0 auto;
border-style: solid;
border-color: #f88214 ;
border-width: 0px 10px 0px 10px ;    
}

Gruß

 

[nicco]

ich glaub da musst du die Höhe mit min-height angeben,dann passt sie sich der Höhe entsprechend an

 

[threadi]

Was ist daran so schwer?

#box2 {
width: 910px; 
float:right; 
margin: 0 auto;
[COLOR=red]background-image: url(transparentesbild.png);
background-repeat: repeat-y;[/COLOR]
}

Und "transparentesbild.png" ist eine 910 Pixel breite und 1 Pixel hohe Grafik die einen alphatransparenten Bereich hat. Schau dir dein Beispiel vom Anhang an. Dort ist es imho genau so gemacht wurden.

 

[Niklas]

Jetzt ist die ganze Box Tranzparent, ich möchte aber das das Textfeld Weiß ist und nur die Umrandung vom Textfeld Tranzparent ist wie auch in dem Link den ich im Erstpost gezeigt habe!

Gruß Niklas

 

[mermshaus]

Gib der transparenten Box ein wenig padding und schachtele ein weiteres div-Element hinein, das den eigentlichen Inhalt hält und eine weiße Hintergrundfarbe hat.