Css Hintergrundbild Ausrichten

H4rd_B4se · 22. April 2012

Hey,

also ich habe keine Ahnung von CSS Coding. Daher möchte ich gerne wissen wie ich ein Hintergrundbild machen kann^^
Das hab ich bereits zusammen "gegoogelt"

Code

<style type="text/css">
img.hintergrundbild {
min-height: 100%;       
min-width: 1024px;
width: 100%;             
height: auto;
position: absolute;        
top: 0;
left: 0;
}




@media screen and (max-width: 1024px) {
img.hintergrundbild {
left: 50%;              
margin-left: -512px; }
}


div#inhalt {
position: absolute;      
}
</style>

Alles anzeigen

Code

<body>

<img id="background-img" class="hintergrundbild" src="http://www.dangeroflife.gta4.me/Bilder/Unbenannt-1.png" alt="" /> <!-- Das eingebundene Hintergrundbild -->
....
</body>

Nun aber ist es so, dass das Bild im Vordergrund ist, und ich nichts anklicken kann.+

MFG H4rd_B4se

Nikolas-Mrak · 22. April 2012

Code

background-image:url(http://www.dangeroflife.gta4.me/Bilder/Unbenannt-1.png);

H4rd_B4se · 22. April 2012

Zitat von H4rd_B4se

Hey,

also ich habe keine Ahnung von CSS Coding.

Wohin damit?

n0skillg3t · 22. April 2012

Code

body { background-image:url(http://www.dangeroflife.gta4.me/Bilder/Unbenannt-1.png); }

H4rd_B4se · 22. April 2012

Zitat von H4rd_B4se

Wohin damit?

n0skillg3t · 22. April 2012

HTML

<html>
<head>
  <style type="text/css">
    body { background-image:url(http://www.dangeroflife.gta4.me/Bilder/Unbenannt-1.png); }
  </style>
</head>
<body>
Hier ist mein Hintergrund platziert!
</body>
</html>

xGreekz7x · 22. April 2012

irgendwo in der css datei :D?
oder da wo das style gemacht wurde...

H4rd_B4se · 23. April 2012

Ah endlich gehts
danke

/e so es geht ja aber

Bei manchen verschiebt sich das Bild. Wie bekomme ich es hin, dass es IMMER gleich ist?

(Bin immer noch Anfänger :D)

fd849fa292a5 · 23. April 2012

Code

body { background-image:url(http://www.dangeroflife.gta4.me/Bilder/Unbenannt-1.png); position: absolute; }

H4rd_B4se · 23. April 2012

Jemand hats mir für HTML gezeigt.

Code

<body background="http://www.dangeroflife.gta4.me/Bilder/Unbenannt-1.png">

Wie muss ich es da machen?

Pupskuchen · 23. April 2012

irgendwas.html

HTML

<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>


</body>
</html>

style.css

Code

body {
  background-image: url('pfad/zum/bild.png');
  background-position: 50% 0;
  background-attachment: fixed;
}

So würde ich es mal versuchen....Betonung auf versuchen.

H4rd_B4se · 23. April 2012

Hm ja ein wenig besser.
Nur ich habe einen 4:3 Bildschirm und einer meiner Kumpels 16:9 und da wird das Bild vertikal wiederholt^^

Kann man da was machen?

Max. · 23. April 2012

setz einfach ein background-repeat:no-repeat; dahinter

Pupskuchen · 25. April 2012

Funktioniert das ganze jetzt?

ScreentzzZ · 27. April 2012

Code

body {
    background-image: url(..../..../Bild.png);
    background-repeat: no-repeat;
    background-attachment: fixed; (Muss nicht)
    position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

So sollte es auf den meisten Browsern funktionieren.

Natürlich muss das nach oben in die style.css Datei.

breadfish.de 11. März 2022