Design Hintergrund nicht nachbaubar >.<

Chuzi

Moin Com :P

Bin noch frisch in Sachen WordPress, also ich fang erst seit Heute an damit zu arbeiten.
Damit ich ein bisschen besser werde, oder allgemein erstmal den Umgang damit lerne, wollte ich eine Seite nachbauen.
Jetzt hab ich ein kleines? Probelm dabei :O
Wenn Ihr euch die Seite -> http://www.einfach-sparsam.de/ anschaut, dann seht ihr das der Hintergrund oben Grün ist, und nach unten gehend immer blasser wird, bis das Grüne verschwunden ist.
Wie bekommt man das so hin?!
Wenn Ihr mir da behilflich sein könntet,wäre das perfekt.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Marcus[IS]

Mojn,

es handelt sich auf der von dir angegebenen Website um eine Hintergrundgrafik die mit einem Farbverlauf (Gradient) versehen wurde.

Der Effekt ist eigentlich heutzutage bei jedem Grafikprogramm, wie zum Beispiel Photoshop, PhotoImpact, Gimp (Freeware) und wie sie alle heißen, Standard.

Eingebunden wird eine Hintergrundgrafik über die style.css des jeweiligen Themes, für welches man sich enscheidet.
[size=8](Je nach Theme bitte die Thematik Childtheme beachten, da bei einem Themeupdate alle gemachten Änderungen eines Themes verloren gehen können.)[/SIZE]

Das könnte zum Beispiel so aussehen;

Code

body {
    background: #4D767A;
    background-image:url(images/Bottom_texture.jpg);
}

Es gibt auch die Möglichkeit so etwas ohne Grafik zu machen und direkt über Anweisungen in der style.css zu bewerkstelligen, da mit CSS3 (angeblich) alles einfacher werden soll.:wink:

Das Problem ist, dass aktuell noch nicht alle Browser einen Standard dafür haben und man verschiedene Anweisungen dafür im Body unterbringen muss.

Ist allerdings jetzt von mir nicht getestet worden und basiert auf Internetrecherchen.

Für Google-Chrome, Safari;

Code

background: -webkit-gradient(linear, 0 0, 0 100%, from(#C5CD90), to(#FFFFFF));

Für Firefox;

Code

background: -moz-linear-gradient(top, #C5CD90, #FFFFFF);

Für den MS-IE 5.5 bis 7.0;

Code

filter: progid:DXImageTransform.Microsoft.gradient
  (startColorstr=#C5CD90, endColorstr=#FFFFFF);

Für den MS-IE 8.0;

Code

-ms-filter: "progid:DXImageTransform.Microsoft.gradient
  (startColorstr=#C5CD90, endColorstr=#FFFFFF)";

gericoach

aber verwende hier nicht eine 2000px x 3000px Grafik, sondern nutze den Kacheleffekt jedes Browsers, heisst: Grafik erstellen, dann davon ein z.B. 1px x 800px Bild machen und die Richtung definieren:

Zitat

background-image:url(images/Bottom_texture.jpg) [COLOR=Red]repeat-x[/COLOR];

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Design Hintergrund nicht nachbaubar >.<

Jetzt mitmachen!