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

Selbstskalierendes Hintergrundbild

Werbung:
hoemknoebi schrieb:
(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?
Zum Vergrößern anklicken....
Habe dir doch eben ein Beispiel genannt...

Warum vergibst du dort einen z-index? Warum willst du ein Bild in das DIV packen, wenn du doch in CSS ein Backgroundimage vergibst?????? Das einzige was in den DIV-Container gehört ist der Text.
 
Ich weiss zwar wie ich ein Bild dass über html eingefügt wird automatisch skalieren kann aber wie mache ich das mit einem in css eingefügten Hintergrundbild und wie mache ich dass es nicht nur so gross ist wie der Text der darüber geschrieben wird?
 
Werbung:
hoemknoebi schrieb:
Ich weiss zwar wie ich ein Bild dass über html eingefügt wird automatisch skalieren kann aber wie mache ich das mit einem in css eingefügten Hintergrundbild und wie mache ich dass es nicht nur so gross ist wie der Text der darüber geschrieben wird?
Zum Vergrößern anklicken....
Steht immer noch in dem von mir geposteten Link...

Einfach eine Höhe per CSS vergeben.
 
hoemknoebi schrieb:
In dem von dir geposteten Link fügst man dass Bild aber über html ein und nicht über css
Zum Vergrößern anklicken....
Was glaubst du denn was das ist???

HTML: 
html {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Ich glaube du weißt nicht mal was CSS überhaupt ist. Daher lege ich dir ans Herz, lerne erstmal die Grundlagen damit du ein Verständnis dafür entwickelst.
 
Werbung:
Mit diesem Text hat es aber noch Ränder das Bild ist nicht komplett drauf und das Bild scrollt nicht mit. Wie kann ich diese unannemlichkeiten noch entfernen?
 
hoemknoebi schrieb:
Mit diesem Text hat es aber noch Ränder das Bild ist nicht komplett drauf und das Bild scrollt nicht mit. Wie kann ich diese unannemlichkeiten noch entfernen?
Zum Vergrößern anklicken....
hoemknoebi schrieb:
Css ist doch eine auslage-datei die für das Layout und User ein ind ausgaben verantwortlich ist, oder nicht?
Zum Vergrößern anklicken....
Bist du nicht vorher auf die Idee gekommen Google zu benutzen, um zu schauen was man überhaupt mit CSS macht?

Gib bitte noch einmal einzeln deinen HTML und CSS Code an, bevor alle hier verzweifeln.
 
Werbung:
Code: 
<!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">

        { background-color: #FFDDDD; }
        #eins { position: absolute; left: 0px; right: 0px; z-index: 1;}
        #zwei { position: absolute; left: 0px; right: 0px; z-index: 2;}

        </style>

   
    </head>


    <body>

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

            </div>
           
            <div id="zwei">
               
            <p>
                <font color="white">Blauer weterzhafwer efwf wef wef wText</font>
            </p>


            </div>   


           

        </div>


       








       
       

    </body>

</html>
 
Code: 
img#bg {
     
      position: fixed;
      top: 0;
      left: 0;
   
      max-width: 100%;
      max-height: 100%;
}

#zwei{

    text-align: center;
    margin-top: 10
   

}
 
Das ist mein html und css code soweit funktioniert dass mit dem übereinanderlappen auch, jedoch passt sich der Text jetzt noch nicht dem Bildverhältniss an. Wie kann ich dass ändern?
 
Werbung:
Werbung:
Meine Frage ist nur noch wie ich das Div mit dem Text dem skalierenden Bild anpassen kann. Von der Breite geht es schon mit text-align: center; aber mit der Höhe des Bildes weiss ich noch nicht wie kann mir da jemand helfen?
 
Ist es irgendwie möglich die aktuelle grösse des Bildes zu ermitteln so das sich die Überschrift über dem Gild mitskalieren kann und die Navigationsleiste darunter immer den gleichen abstand zum Bild hat? (evt mit einem javascript?)
 
Werbung:
hoemknoebi schrieb:
Ist es irgendwie möglich die aktuelle grösse des Bildes zu ermitteln so das sich die Überschrift über dem Gild mitskalieren kann und die Navigationsleiste darunter immer den gleichen abstand zum Bild hat? (evt mit einem javascript?)
Zum Vergrößern anklicken....
Der Navigationsleiste kannst du doch einfach immer den gleichen Abstand zum darüber liegenden Element geben. Warum willst du die größe des Bildes ermitteln, wenn du Sie doch selber weißt?
 
Ich meine die grösse des Bildes die das Bild im Browser hat wenn es sich immer skaliert.
Und mit margin top geht es ebben nicht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben