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

Problem mit Hintergrundbild

H

hannez

Neues Mitglied
Hallo Community,

ich habe ein Problem mit der Ausrichtung und Darstellung eines Hintergrundbildes. Das Bild soll unten rechts ausgerichtet sein und immer den Hintergrund bedecken ohne zu verzerren. Wie hier. Mein Problem ist folgendes: Wenn ich den Browser vertikal zusammenschiebe bekomme ich unten einen weißen Rand. Außerdem wird das Bild seit ich die die Ausrichtung auf unten rechts eingefügt habe sehr weit nach oben geschoben (in Opera habe ich sogar links einen 1cm breiten weißen Rand). Anbei ein Bild.

screenshot.jpg

Ich hoffe ihr könnt mir helfen, denn ich bin mit meinem mageren Latein am Ende.

Gruß Hannes


Code: 
<!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>Unbenanntes Dokument</title>
<style type="text/css">

body,td,th {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 9pt;
	color: #FFF;
	border: none;
	overflow: hidden;
	margin: 0;
	padding: 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-origin: content-box
}

body {
	background-color: #FFF;
	background-image: url(bike2.jpg);
	background-position: bottom right;
	background-repeat: no-repeat;
}
a:link {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFF;
}
a:hover {
	text-decoration: none;
	color: #0CF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
.Schrift10er {
	font-size: 10pt;
}
.typA { 
	margin: 2cm; 
}
</style>
</head>
<body>
<table valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
  <tr>
    <td>
      <table valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
        <tr>
          <td width="79%" bgcolor="#000000"><img src="../Slider/Logo/Logo_Webseite.jpg" width="200" height="40" /></td>
          <td width="14%" bgcolor="#000000">&nbsp;</td>
          <td bgcolor="#000000" class="Schrift10er">Kontakt</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<div style="position: absolute; bottom: 0px; left: 0px; width: 100%;"><table width="100%" border="0">
  <tr>
    <td width="62" height="25" align="center" bgcolor="#000000">Food</td>
    <td width="62" height="25" align="center" bgcolor="#000000">People</td>
    <td width="62" height="25" align="center" bgcolor="#000000">Travel</td>
    <td width="62" height="25" align="center" bgcolor="#000000">Misc</td>
    <td width="62" height="25" align="center">&nbsp;</td>
    <td width="62" height="25" align="center">&nbsp;</td>
    <td width="62" height="25" align="center">&nbsp;</td>
    <td width="62" height="25" align="center">&nbsp;</td>
    <td width="62" height="25" align="center">&nbsp;</td>
    <td width="62" height="25" align="center">&nbsp;</td>
    <td width="62" height="25" align="center">&nbsp;</td>
    <td width="62" height="25" align="center">&nbsp;</td>
    <td width="62" height="25" align="center">&nbsp;</td>
    <td width="62" height="25" align="center">&nbsp;</td>
    <td width="62" height="25" align="center">&nbsp;</td>
    <td width="25" height="25" align="center" bgcolor="#000000">01</td>
    <td width="25" height="25" align="center" bgcolor="#000000">02</td>
    <td width="25" height="25" align="center" bgcolor="#000000">03</td>
    <td width="25" height="25" align="center" bgcolor="#000000">04</td>
    <td width="25" height="25" align="center" bgcolor="#000000">05</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
<div class="typA">
  <h1>Willkommen auf...</h1></div>
</body>
</html>
 
In deinem Beispiel ist das Bild nicht als Hintergrundbild im body definiert sondern in einem absolut positionierten Element. Außerdem muss ich bei meinem Viewport die Webseite scrollen - was ich nicht so toll finde.

In deinem HTML-Code sehe ich eine vermutlich unnötige Tabelle. Denn Tabellen dienen nicht zum Aufbau eines Designs, so wie Du es scheinbar machst.

Kann man deinen Versuch auch irgendwo online sehen? Gerade wg. dem Bild wäre es ja interessant das mal zu sehen.
 
Hallo threadi,

vielen Dank dass du dir dir Zeit genommen hast mir zu antworten :-).

Wie definiere ich denn das Hintergrundbild um? Ich habe es über die Hintergrundfunktion von Dreamweaver eingefügt. Warum musst du scrollen? Genau das sollte eigentlich nicht sein :-(.

Was empfiehlst du mir anstelle der Tabellen? Haben die Tabellen denn irgendwelche Nachteile oder ist das nur nicht mehr up-to-date bzw. unprofessionell?

Online habe ich die Seite leider noch nicht, ich kann dir nur einen Screenshot geben, welcher zeigt wie es eigentlich aussehen sollte und wie es aussieht wenn ich den Browser zusammenschiebe (unerwünschte weiße Fläche unten).

screenshot2.jpg

Wie man sicherlich schon gemerkt hat bin ich nicht gerade der HTML und CSS Crack, ich will auch nur meine Seite, so wie ich sie mir vorstelle, online bekommen. Daher bitte keine Verweise zu Selfhtml mit dem Hinweis "Lern erstmal HTML" ;)

Vielen Dank und lieben Gruß

Hannes
 
hannez schrieb:
Wie definiere ich denn das Hintergrundbild um? Ich habe es über die Hintergrundfunktion von Dreamweaver eingefügt. Warum musst du scrollen? Genau das sollte eigentlich nicht sein :-(.
Zum Vergrößern anklicken....

Ich muss bei deiner Beispiel-Seite scrollen, nicht bei dir. Du hast ja nur Quellcode von dir gezeigt und keinen Link auf deine Seite - was jedoch wie gesagt von Vorteil wäre um auch deine restlichen Fragen zu beantworten.

Was empfiehlst du mir anstelle der Tabellen? Haben die Tabellen denn irgendwelche Nachteile oder ist das nur nicht mehr up-to-date bzw. unprofessionell?
Zum Vergrößern anklicken....

Tabellen als Grundgerüst von Webseiten sind schlichtweg falsch. Dafür sind HTML-Tabellen nie gedacht gewesen, wurden im letzten Jahrtausend nur oft dafür genutzt. Heute denken Einsteiger oft, dass es damit einfacher geht. Aber Tabellen haben gleichzeitig auch bei der Gestaltung viele Nachteile.

Was die Alternative ist? Keine. Du musst nur HTML-Elemente dafür verwenden wie sie gedacht sind. Also Überschriften als Überschriften, Absätze als Absätze etc.pp. Die vielfach verwendeten div-Elemente sollte man nur sparsam einsetzen, nur wenn es unbedingt notwendig ist (das ominöse "div-Layout" gibt es btw. auch gar nicht). Falls Du dich dafür entscheiden solltest im HTML5-Standard zu schreiben, könntest Du viele div-Elemente auch durch semantisch korrekte Elemente ersetzen. Für eine Navigation z.B. <nav>.

Und wie schon gesagt: mit einem Screenshot und Quellcode kann man hier wenig sagen. Lade die Seite irgendwo hoch und zeig den Link.
 
Schreibe das CSS noch mal neu und fange mit dem Hintergrundbild an.

HTML: 
html {
    height: 100%;
}

body {
    background-image: url("../images/bike2.jpg");
    background-size: cover;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben