• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild automatisch mit vergrößern

K

kruk

Mitglied
Ich hab wiedermal ein kleines Problem... Ich will, das mein Hintergrundbild je nach Auflösung utomatisch mit vergrößert wird.
Habe es schon mit widht und height auf 100% versucht, aber irgendwie wird das Bild dann immer an der Seite abgeschnitten, statt sich mit zu vergrößern. Hoffe es kann mir jemand helfen :oops:

kruk
 
Werbung:
Möglichkeit I: Mit CSS3


Code: 
body
{ 
  background: url(bild.jpg);
  background-size: 100%;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
[COLOR=#00008B]  filter[/COLOR][COLOR=#000000]:[/COLOR][COLOR=#00008B]progid[/COLOR][COLOR=#000000]:[/COLOR][COLOR=#000000]DXImageTransform[/COLOR][COLOR=#000000].[/COLOR][COLOR=#000000]Microsoft[/COLOR][COLOR=#000000].[/COLOR][COLOR=#000000]AlphaImageLoader[/COLOR][COLOR=#000000]([/COLOR][COLOR=#000000]src[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#800000]'bild.jpg'[/COLOR][COLOR=#000000], [/COLOR][COLOR=#000000]sizingMethod[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#800000]'scale'[/COLOR][COLOR=#000000]);[/COLOR][COLOR=#000000]
[/COLOR][COLOR=#00008B]  -ms-filter[/COLOR][COLOR=#000000]:[/COLOR][COLOR=#000000] "[/COLOR][COLOR=#00008B]progid[/COLOR][COLOR=#000000]:[/COLOR][COLOR=#000000]DXImageTransform[/COLOR][COLOR=#000000].[/COLOR][COLOR=#000000]Microsoft[/COLOR][COLOR=#000000].[/COLOR][COLOR=#000000]AlphaImageLoader[/COLOR][COLOR=#000000]([/COLOR][COLOR=#000000]src[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#800000]'bild.jpg'[/COLOR][COLOR=#000000], [/COLOR][COLOR=#000000]sizingMethod[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#800000]'scale'[/COLOR][COLOR=#000000])[/COLOR][COLOR=#000000]"[/COLOR][COLOR=#000000];
}
[/COLOR]


Möglichkeit II: Absolut positioniertes Bild mit kleinem z-index

Code: 
<body>
 <img src="bild.jpg" style="position:absolute; left:0; top:0; width:100%; height:100%; z-index:0;" />
 <div id="wrapper" style="z-index: 100">
  Seiteninhalt
 </div>
</body>

edit: Es geht aber um das Hintergrundbild der gesamten Seite? Ansonsten hab ich das falsch verstanden.
 
Zuletzt bearbeitet:
Danke, das zweite ist perfekt :)

€: Doch nicht, irgendwie zeuigt es seitdem ich es drin habe keine anderen Elemente (divs etc) mehr an...

Der Code:
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="de" lang="de">

<head>
    <title>Beispiel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
    <img src="bgimg.png" style="position:absolute; left:0; top:0; width:100%; height:100%; z-index:0;" />
</head>

<body>
<div id="beispiel">
Blubb blubber blubbelblubb
</div>

</body>
</html>

CSS Code:
HTML: 
#beispiel {
    background-color:#FF00FF;
    width:300px;
    height:200px;
}

Es bringt auch nichts, wenn man deinen Vorschlag in den body teil schreibt... :-?

€²: Das "Hintergrundbild" wurde eider zum Hauptbild, und überdeckt alles.
 
Zuletzt bearbeitet:
Werbung:
Der <img>-Tag gehört nicht in den <head>-Bereich. Der muss im <body> stehen.

Gib dann #beispiel nicht nur einen z-index sondern auch "position: relative;".
 
Werbung:
Das mit dem img Tag wusste ich schon, war nur ein Test^^
Aber das mit dem position relative war es, danke :) :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben