zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Gradient als Hintergrund mit fixer Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.10.2013, 14:14
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard CSS Gradient als Hintergrund mit fixer Höhe

Hallo ins Forum,

ich möchte meinem body-Element einen Verlauf als Hintergrund geben. Diesen lasse ich per CSS generieren. Funktioniert soweit. Nun soll jedoch Verlaufshintergrund nur eine Höhe von 20% haben und beginnen soll der Verlauf erst bei 10% von oben. Kann man das realisieren?

Hier mein Verlauf:
[HTML]

body {
background: linear-gradient(top, #000000 0%, #616161 50%, #ffffff 100%);
}

Prefixes für die Browser habe ich mal weggelassen. Mit background-size und background-position komme ich nicht weiter, das funktioniert scheinbar nur mit Bildern.

Danke für n Tipp und Gruß
mimii
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.10.2013, 21:13
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Das wäre Dein Ansatz:

Code:
* {
	margin: 0;
	padding: 0;
	}

html,
body {
	height: 100%
	}

body {
	background: #000 linear-gradient(to bottom, #f00 10%, #ff0 20%, #000 30%) no-repeat;
	}
Das ergibt einen Verlauf, der (vertikal gesehen) bei 10% beginnt, bei 20% eine Zwischen- und bei 30% seine Zielfarbe erreicht, also de facto 20% hoch ist (bezogen auf den Viewport). Das separate #000 ist nötig, da sonst ist der Bildschirm unterhalb der 100% weiß ist, und no-repeat verhindert eine Wiederholung des Verlaufs unterhalb der 100% (beides sieht man erst, wenn der Seiteninhalt höher als der Viewport = 100% ist und man runterscrollt). Alternativ fixed für background, sofern er beim Scrollen stehenbleiben soll.

P.S.: "to bottom" kannst Du auch weglassen, da Initialwert.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Geändert von heiko_rs (27.10.2013 um 21:32 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Buttons auf gleicher höhe ? CodingToHeart CSS 9 18.04.2012 20:50
CSS Gradient ohne img zu laden passsy CSS 9 17.04.2011 20:42
Problem mit CSS: Hintergrund im Text ohne Umbruch? EPMS CSS 11 14.05.2009 14:05
CSS Layout: Höhe dem Inhalt anpassen - mit Mindesthöhe trequ CSS 3 05.09.2004 12:29
Öffnen im eigenen Fenster - Breite unf Höhe mit CSS ? Anonymous CSS 2 25.06.2003 14:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:54 Uhr.