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

Selbstskalierendes Hintergrundbild

H

hoemknoebi

Mitglied
Guten Tag zusammen.

Ich habe ein Problem/Frage.
Wie kann ich ein Bild als oberer Balken einer Homepage erstellen das sich automatisch der Browser-grösse anpasst und über das ich einen Text schreiben kann?
 
Werbung:
Denke du suchst
Code: 
background-size: cover;
Das mit dem Text darüber sollte ja kein Problem sein oder?
 
Werbung:
Werbung:
hoemknoebi schrieb:
http://xhtmlforum.de/70408-hintergrundbild-fenstergr-e-anpassen.html
Bei diesem Thread geht es aber das Bild ist dann nicht ein Hintergrund sondern ein Element wie kann ich das abändern?
und nookie in dem von dir verlinkten thread geht es ja auch um den ganzen Hintergrund.

Aber kann man nicht nur am oberen Rand der Seite ein selbst skalierendes Bild mit Text darauf machen?
Zum Vergrößern anklicken....

Ja, es geht um den ganzen Hintergrund. Wenn du nachdenken würdest, geht dir vllt. ein Licht auf.
 
Werbung:
Werbung:
hoemknoebi schrieb:
Ich bin ziemlich Neuanfänger und weiß nicht wie ich das bewerkstelligen könnte. Ich wäre froh um den Codeblock.
Zum Vergrößern anklicken....
Genau deswegen wirst du von mir keinen Codeblock kriegen. Denn es solange du nicht verstehst, was du dort machst bringt es dir garnichts. Der Codeblock steht schon in dem von mir geposteten Link, das musst du einfach auf deinen DIV-Container mit Höhe anwenden.
 
ok und wiso gibt es dann bei
img#bg {
min-height: 100%;
min-width: 100%;
position: absolute;
}
immer noch Ränder trotz 100%?
 
Werbung:
sry das Problem ist schon gelöst mit diesem Code

img#bg {
position: fixed;
top: 0;
left: 0;

max-width: 100%;
max-height: 100%;
}
 
Werbung:
(html)

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


<head>
<title>hoemknoebi</title>
<link rel="shortcut icon" href="ssaaxx.png" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css">

<style type="text/css">

#eis { z-index:2;}
#zwei { z-index:1;}

</style>


</head>


<body>



<div id="eins">

<img src="4.jpeg" id="bg">

</div>

<div id="zwei">

<p>
<font color="#0000FF">Blauer weterzhafwer efwf wef wef wText</font>
</p>


</div>

</body>

</html>


(css)

img#bg {
position: fixed;
top: 0;
left: 0;

max-width: 100%;
max-height: 100%;
}



kann mir jemand sagen wieso das nicht funktioniert?
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben