zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundbild positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.06.2013, 18:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2010
Beiträge: 12
kadehi befindet sich auf einem aufstrebenden Ast
Standard Hintergrundbild positionieren

Hallo,

ich möchte auf einer Seite ein Hintergrundbild anzeigen, dass immer auf 100% Bildschirmgröße vergrößert wird. Es soll rechtsbündig auf der Seite dargestellt werden.

Mein Content Bereich soll immer zentriert am oberen Rand der Seite dargestellt werden. Er soll über dem Hintergrundbild liegen.

Im Moment verwende ich folgenden Ansatz:

HTML-Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>Test</title>
<style type="text/css">
<!--
HTML, BODY {
	margin: 0;
	padding: 0;
	position: relative;
}

BODY {
	cursor: default;
	font-family: "Helvetica Neue","Arial",sans-serif;
	color: #666666;
	font-size:10pt;
	background-color: #FFF;
}

h1 {
	color:#CCCCCC;
	font-size:14pt;
    font-weight:normal;
	margin-top: 0px;
}

#hintergrund { 
	position:absolute; 
	z-index:1; 
	float:left; 
	height:100%;
}

.c1-wrapper {
	min-width:980px;
	position:relative;
	width:980px;
	background-color:#FFF;
	z-index:5;
	clear:both;
	margin-top:0;
	margin-right:auto;
	margin-bottom:0;
	margin-left:auto;
}

.c2-wrapper {
	margin: 10px;
	float: left;
	position: relative;
	width: 960px;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	background-color: #FFF;
}
-->
</style>
</head>

<body>
    <div><img id="hintergrund" src="images/hg.jpg" alt="" title=""/></div>
    <div class="c1-wrapper">
        <div class="c2-wrapper">
        	text
        </div>
    </div>
</body>
</html>
Das Hintergrundbild wird im Moment aber gar nicht angezeigt.

Danke im Voraus für die Hilfe.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.06.2013, 19:27
Benutzer
neuer user
 
Registriert seit: 25.07.2006
Ort: Hamburg
Beiträge: 60
Stadtmensch befindet sich auf einem aufstrebenden Ast
Standard

Wenn du anstatt height:100% width:100% nimmst, wird das Bild angezeigt.

Code:
#hintergrund { 
	position:absolute; 
	z-index:1; 
	float:left; 
	width:100%;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.06.2013, 20:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2010
Beiträge: 12
kadehi befindet sich auf einem aufstrebenden Ast
Standard

Danke zunächst.
Das Bild wird nun angezeigt.
Allerdings zu gross. man muss nun auf der Seite herunter scrollen.
Das Hintergrundbild soll immer 100% der Höhe des dargestellten Bereiches im Browser betragen. Die Breite soll eigentlich nur proportional angepasst werden. Es soll rechtsbündig am rechten Rand des Browsers zu dargestellt werden.
Mit Zitat antworten
  #4 (permalink)  
Alt 12.06.2013, 20:48
Benutzer
neuer user
 
Registriert seit: 25.07.2006
Ort: Hamburg
Beiträge: 60
Stadtmensch befindet sich auf einem aufstrebenden Ast
Standard

Für eine Anpassung an die Höhe kann man so schreiben:

Code:
HTML, BODY {
	margin: 0;
	padding: 0;
	position: relative;
	height:100%
}

BODY {
	cursor: default;
	font-family: "Helvetica Neue","Arial",sans-serif;
	color: #666666;
	font-size:10pt;
	background-color: #FFF;
}

#hintergrund { 
	position:absolute; 
	z-index:1; 
	float:left; 
	width:auto%;
	height:100%
}
...usw. etc.
Es muss das Elternelement auch eine Höhe von 100% haben. Nun fehlt nur noch rechtsbündig. Da hab ich auch gerade keine Idee.

Jetzt hab ich doch eine Idee!
Das div, in dem das Bild liegt, muss direction:rtl sein. D.h. Schreibrichtung von rechts nach links.

Also z.B. so schreiben:
Code:
...
<div style="direction:rtl"><img id="hintergrund" src="images/hg.jpg" alt="" title=""/></div>
...
usw. etc.

Geändert von Stadtmensch (12.06.2013 um 20:56 Uhr) Grund: Noch was hinzufügt.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.06.2013, 22:07
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Der Fairniss halber Hintergrundbild / Content positionieren - PHP Forum: phpforum.de
Mit Zitat antworten
  #6 (permalink)  
Alt 13.06.2013, 22:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2010
Beiträge: 12
kadehi befindet sich auf einem aufstrebenden Ast
Standard

right:0 müsste das Bild an den rechten Rand setzen.
Mit Zitat antworten
  #7 (permalink)  
Alt 13.06.2013, 22:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2010
Beiträge: 12
kadehi befindet sich auf einem aufstrebenden Ast
Standard

Perfekt, das war die Lösung.
Herzlichen Dank!!!


Code:
#hintergrund { 
	position:absolute; 
	z-index:1; 
	float:left; 
	width:auto%;
	height:100%;
	right:0;
}
Mit Zitat antworten
  #8 (permalink)  
Alt 13.06.2013, 22:40
Neuer Benutzer
neuer user
 
Registriert seit: 13.06.2013
Beiträge: 5
cheasy befindet sich auf einem aufstrebenden Ast
Standard

Die einfachste Lösung wär wohl CSS3:

Code:
body {
   background-image: url('bg.jpg');
   background-size: contain;
   background-position: right;
}
So brauchst du kein extra div, in dem du ein Bild einfügst, sondern definierst das gleich im body-Tag.

Mehr dazu: Background-size - CSS3 . Info
Mit Zitat antworten
  #9 (permalink)  
Alt 13.06.2013, 22:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2010
Beiträge: 12
kadehi befindet sich auf einem aufstrebenden Ast
Standard

Ja, das ist zukünftig bestimmt interessant. Im Moment muss ich leider noch auf die Kompatibilität achten.

Danke an alle für die Bemühungen.
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
Hintergrundbild, Content richtig positionieren Foma CSS 6 14.08.2012 19:24
Text auf zentrierten Hintergrundbild positionieren zonkifail CSS 8 26.10.2011 19:01
Hintergrundbild ausserhalb positionieren RaBo CSS 1 21.07.2011 19:13
Hintergrundbild in zentriertem div positionieren und fixieren anutoshen CSS 13 25.04.2010 13:37
Hintergrundbild in Liste positionieren seelefant CSS 10 09.07.2008 19:51


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