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

CSS/HTML background-image wird nicht richtig dargestellt :/

Sixx

Neues Mitglied
Hallo,

ich will gerade diesen Design in HTML umsetzen: http://s1.directupload.net/images/110829/czxloc4p.png

Aber es klappt schon beim hintergrund nicht, ich habe den Hintergrund (1600px x 646px) eingefügt (siehe unten) aber er wird nicht in der 100% größe dargestellt, nämlich kleiner. Aber es soll in 1600px breite dargestellt werden. :(

CSS
Code:
@charset "utf-8";

body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #FFF;
}
body {
    background-color:#000;
    background-image:url(images/bg.png);
    background-repeat:no-repeat;
    background-position:center;
    margin-top:700px;
}
a {
    font-size: 12px;
    color: #c05f00;
}
a:visited {
    color: #c05f00;
}
a:hover {
    color: #F93;
}
a:active {
    color: #c05f00;
}



HTML
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beat em Up | EU Alexstrasza</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
</body>
</html>
 
Zuletzt bearbeitet:
Es geht dir um die Skalierung eines Hintergrundbildes. Das ist (momentan) nicht möglich (oder nur bei sehr wenigen, sehr neuen Browsern). Es gibt eine Alternative die hier schon oft diskutiert wurde:
http://www.html.de/html-und-xhtml/38318-hintergrundgrafik-stauchen-anpassen.html#post279705
http://www.html.de/javascript-ajax-und-dhtml/36805-hintergrund-skalieren.html

Es soll ja nicht skalliert werden, im gegenteil. Es soll genau so angezeigt werden wie die Grafik groß ist. Nicht kleiner nicht größer.
 
Anhand deines Code-Schnippsels ist leider nicht erkennbar wie es nun derzeit tatsächlich dargestellt wird. Ich würde sagen, das Bild wird schon komplett dargestellt - zentriert, im Hintergrund. Wenn Du ein kleineres Browserfenster hast wirst Du natürlich nicht alles sehen (genau wie ich). Zeig einen Link zur Problemseite, damit man sich das genauer anschauen kann.
 
Du musst dabei bedenken, dass nicht jeder eine Auflösung von 1600 pixeln Breite hat. Bei kleineren Auflösungen werden dann (hässliche) horizontale Scrollbalken angezeigt.

Sofern du die Breite des Body auf 1600 Pixel setzt.


Was mir eben noch auffällt: Wieso setzt du den Body 700px nach unten?!
 
Du musst dabei bedenken, dass nicht jeder eine Auflösung von 1600 pixeln Breite hat. Bei kleineren Auflösungen werden dann (hässliche) horizontale Scrollbalken angezeigt.

Sofern du die Breite des Body auf 1600 Pixel setzt.


Was mir eben noch auffällt: Wieso setzt du den Body 700px nach unten?!

Ich setze das nach unten weil es sonst der Background zu weit oben ist, ka wieso.
 
Wenn der Ordner mit den Bildern nicht im selben Verzeichnis ist, wie deine CSS-Datei .. dann stimmt in deiner CSS-Datei die Pfad-Angabe nicht ...

zudem ... 700px Margin von oben ist verdammt viel .. überleg mal: manche haben nur eine Auflösung von 1024x768px.
 
Zurück
Oben