CSS

Hallo ich habe noch nen Problem ich will nen hintergrundbild mit css einfügen wie schaffe ich es dass das bild immer 100% der seite füllt??

body
{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; color: #e6e6e6; background-image:url(hintergrund.jpg ); font-family: verdana,arial; font-size: 9pt;}

so ist es in der css datei.
und ich will dass das hintergrund.jpg in der höhe und in der breite das ganze browser fenster ausfüllt.das bild soll nicht wenn es kleiner ist als das browserfenster nebeneinander erscheinen
Kapiert???
ich hoffe mal.:-)
Bitte helft mir

Torty

Hintergrundbilder in CSS können nicht skaliert werden. Anders als Bilder in HTML-Elementen wird immer die tatsächliche Größe der Grafikdatei angezeigt.

wie könnte man es dann mit html machen??

Torty

Gar nicht. Denn HTML kennt keine Hintergrundgrafiken, sondern nur Inhalt von Elementen. Zudem ist die Frage eher so zu stellen:
Was soll erreicht werden?

Modula

Du könntest das Bild mithilfe eines <div> und z-index in den Hintergrund bringen, innerhalb des <div> das Bild per img anzeigen und auf 100% skalieren.

Darüber legst du dann den Inhalt deiner Seite - mal so als Lösungsvorschlag

Keine Lust auf Login

Mit einem kleinen Trick und einer nicht ganz 100% logischen Auszeichnung ist es relativ leicht den Anschein eines "sich skalierendes Hintergrundbildes" zu erwecken.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Skaliertes Hintergrundbild</title>
	<style type="text/css" media="screen">
	*{
	margin:0px;
	padding:0px; 
	}
	html,body{
	width:100%;
	height:100%;
	}
	#bg{
	width:100%;
	height:100%;   
	position:absolute;  
	z-index:1;
	display:block !important;
	}
	#seiteninhalt{
	position:absolute;  
	z-index:2;
	}
	</style>
</head> 
<body>
[img]P1010006.JPG[/img]
<div id="seiteninhalt">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla lacus orci, tincidunt sit amet, posuere eu, pellentesque vel, elit. Etiam lectus velit, dapibus vitae, dignissim ac, sollicitudin vitae, ipsum. Maecenas et velit. Suspendisse ut turpis et nibh mattis congue. Fusce erat sapien, tincidunt non, tincidunt ac, aliquam ac, arcu. Nullam eget erat eget elit dignissim malesuada. Proin non quam quis ipsum vehicula ultricies. Fusce libero sapien, hendrerit tempor, sagittis sit amet, venenatis eget, lorem. Mauris iaculis diam quis leo. Maecenas sed nibh. Aenean libero sapien, aliquet eget, bibendum eu, mollis vitae, lorem. Sed auctor, mi et sagittis consequat, lorem magna dictum neque, eu pretium dolor dui ac risus. Sed sed magna. In vestibulum. Cras enim libero, hendrerit quis, blandit id, consectetuer at, justo. Suspendisse cursus iaculis mi. Morbi nisl urna, ultrices nec, pellentesque ac, aliquam eu, odio. Donec sapien mi, cursus at, viverra eget, rutrum sed, diam. Integer rutrum quam et augue.
</div>
</body>
</html>

Alles anzeigen

Das läuft folgendermaßen ab:
Das Bild wird per img-Tag und leerem alt-Attribut als Designmittel ausgezeichnet. Das Bild wird mit position:absolute; an die richtige Stelle gesetzt und durch das setzen von width und height auf 100% wird der Anschein einer Skalierung erweckt.
Sollte der Stylesheet aus irgendwelchen Gründen nicht geladen werden können, wird das Bild durch display:none; nicht angezeigt.

CSS

Tags

Benutzer online in diesem Thema