zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden [gelöst] Hintergrund vertikal flexibel

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.07.2011, 11:31
stetig lernend
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2009
Ort: Augsburg
Beiträge: 13
fritze-jr befindet sich auf einem aufstrebenden Ast
Standard [gelöst] Hintergrund vertikal flexibel

Sevus Pros,

ich komme nicht weiter unter kapier’ da was nicht: Hier mal mein Beispiel: Flexibler Hintergrund

Ich würde gern ein Hintergrundbild flexibel einbinden. Sprich Rand z.B. 5% und von oben immer 30% Luft.
5% linker Rand klappen prima, aber 30% von oben wollen gar nicht.

Info: IE interessiert mich nicht die Bohne!

HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>Flexibler Hintergrund</title>
	<style type="text/css" title="text/css" media="screen">
		body {
			background-color: red;
		    background-image: url(img/tt-bgr3.gif);
		    background-repeat: no-repeat;
		    background-position-x: 10%;
		    background-position-y: -25%;
		}
		h1 {
			width: 80%;
			background-color: rgba(255,255,255,0.5);
			text-align: center;
		}
	</style>
</head>

<body>
    <div id="wrapper">
		<h1>Hallo!</h1>
    </div>
</body>
</html>
Bin für jeden Tipp dankbar.
Andreas

Geändert von fritze-jr (19.07.2011 um 14:39 Uhr) Grund: gelöst, Rechtschreibung
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.07.2011, 11:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Tipp: Validieren.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.07.2011, 12:07
stetig lernend
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2009
Ort: Augsburg
Beiträge: 13
fritze-jr befindet sich auf einem aufstrebenden Ast
Standard

Gut, background-position (background-position: 10% 30% zusammen gefasst, aber ändern tut das an der Sache leider nichts.

Gibt es noch andere Tipps?
Mit Zitat antworten
  #4 (permalink)  
Alt 19.07.2011, 13:26
Benutzer
neuer user
 
Registriert seit: 27.05.2011
Beiträge: 54
paulepulmo befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

HTML-Code:
/* Außen und Innenabstände zurücksetzen */
* {
  margin:0;
  padding:0;
 }
  
 html,body{
  height:100%;
}

body {
  background: url(deinbild.gif) no-repeat 10% 30% #f00;
}

h1 {
 width: 80%;
 background-color: rgb(255,255,255); /* Hier lieber eine halbtransparente Hintergrundgrafik */ 
 text-align: center;
}
So funktionierts.
Achso, nimm lieber noch ein anderen DOCTYPE.

paulepulmo
Mit Zitat antworten
  #5 (permalink)  
Alt 19.07.2011, 13:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Vermutlich kommt noch eine falsche Vorstellung von Prozentwerten bei der Positionierung von Hintergrundbildern dazu.
Lesestoff: Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : BACKGROUND-POSITION }
Mit Zitat antworten
  #6 (permalink)  
Alt 19.07.2011, 14:22
Benutzer
neuer user
 
Registriert seit: 27.05.2011
Beiträge: 54
paulepulmo befindet sich auf einem aufstrebenden Ast
Standard

Hm, an was man alles denken muss. Aber es leuchtet ein.
Mit Zitat antworten
  #7 (permalink)  
Alt 19.07.2011, 14:38
stetig lernend
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2009
Ort: Augsburg
Beiträge: 13
fritze-jr befindet sich auf einem aufstrebenden Ast
Standard

Danke Euch allen!
Ich werde mir das erstmal in Ruhe durchlesen und dann nochmal testen.


Viele Grüße Andreas
Mit Zitat antworten
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
div Hintergrund wird im IE durch Hintergrund des unteren divs überlagert ren83 CSS 6 19.10.2008 15:50
Div Orientierung Leonidus CSS 22 30.05.2007 17:05
Hintergrund SPMan CSS 0 16.05.2007 08:58
Hintergrund wird im IE abgehackt lekim CSS 0 29.03.2006 14:14


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:01 Uhr.