Hintergrundbild an Auflösung anpassen

    Hey Leute,

    will eine Website aufbauen mit dem Programm Microsoft Expression Web2, jedoch scheitert es schon an dem Hintergrundbild, bin in dem Thema eher ein Anfänger nur bissi HTML Kentnisse,

    Habe hier 2 Monitore einen mit 1680x1050 und einen mit 1024x768

    Wenn ich das Hintergrundbild einfach einfüge dann wiederholt sich das Bild so blöd und überall ist es anders.
    Hab schon gegoogelt und mehrere Codes gefunden und einfach ma kopiert:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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=iso-8859-1" />
    <title>Hintergrundbild</title>

    <style type="text/css">
    html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    }

    img#bg {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    }

    div#content {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 100;
    }
    </style>

    </head>

    <img src="VTK%20Hintergrund%20Website.jpg" id="bg" />
    <div id="content">Ich bin ein Text, blablublop</div>
    </body>
    </html>


    Dieser ist schon ganz ok, aber er streckt das Bild so komisch, kann man nicht einfach das so machen das es bei jeder Auflösung gleich aussieht....

    Bitte helft mir, ich verzweifel hier noch :(

    Danke im vorraus

    Gruß Chris

    Eine Grafik hat nun mal eine bestimmte Breite und Höhe und Hintergrundgrafiken sind da grundsätzlich nicht flexibel.
    Du könntest jedoch eine Grafik wählen, welche (vermeintlich) groß genug ist, um auch bei großen Viewports noch vollständig angezeigt zu werden.
    Oder du wählst die Grafik so geschickt, dass sich ein Teil davon kachelen (wiederholen) kann.
    Lösungsansätze hierzu:
    http://www.ohne-css.gehts-gar.net/0030.php
    http://www.ohne-css.gehts-gar.net/0029.php

    Alternativ könntest du ein Layout mit fixen Breiten wählen, passend zu den Maßen der Hintergrundgrafik.
    Was die Länge betrifft, kannst du zusätzlich einen Farbton als Hintergrundfarbe hinterlegen. Dieser kommt dann zum tragen, wenn der Inhalt länger wird als die Grafik hoch ist.
    http://www.ohne-css.gehts-gar.net/0027.php

    Unabhängig davon noch ein Tipp zu deinem Code:
    Nach dem geschlossenen </head> musst du zunächst den <body> öffnen.

    Diese Angaben bei #bg und #content sind unnötig und sollten gelöscht werden:

    Code
    position: absolute;
left: 0px;
top: 0px;

    Servus, also da wir ja schon ne Website haben, aber mein Freund den Hintergrund net ändern kann da des son Template is, wollt ich ja ne neue machn, hab aber jetzt ma die Daten hochgeladen von der jetzigen Seite, da kann man doch bestimmt den Hintergrund ändern oder?

    Is das Verboten bei nem Template???? oder darf ich das modifizieren wenns gewerblich is?

    a { color:#002266; text-decoration:none; }
    a:hover { color:#000000; text-decoration:underline; }

    a.side { color:#0f0f0f; text-decoration:none; }
    a:hover.side { color:#fff; text-decoration:underline; }

    a.white { color:#fff; text-decoration:none; }
    a:hover.white { color:#000000; text-decoration:underline; }

    body {
    font-family:Verdana,Tahoma,Arial,Sans-Serif;
    font-size:11px;
    margin:10px;
    }

    form { margin:0px 0px 0px 0px; }

    hr { height:1px; color:#ddd; }
    hr.side-hr { height:1px; color:#ccc; }

    td { font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:11px; }

    pre { font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:10px; }

    .alt { color:#666; }

    .white-header {
    font-family:Verdana,Tahoma,Arial,Sans-Serif;
    font-size:10px;
    height: 56px;
    text-align:center;
    color:#fff;
    padding: 5px 0px 13px 0px;
    background-image: url(images/whitebg.gif);
    background-repeat: repeat-x;
    background-position: center;
    }

    .footer {
    font-family:Verdana,Tahoma,Arial,Sans-Serif;
    font-size:10px;
    color:#000;background-color:#ddd;
    border-top:1px #fff solid;
    border-bottom:1px #fff solid;
    padding:4px;
    text-align: center;
    }

    .full-header {
    font-family:Verdana,Tahoma,Arial,Sans-Serif;
    font-size:10px;
    color:#666;background-color:#dfdfdf;
    }

    .button {
    font-family:Tahoma,Arial,Verdana,Sans-Serif;
    font-size:10px;
    color:#000;background-color:#fff;
    height:19px;
    padding:0px 2px 0px 2px;
    border:1px #888 solid;
    margin-top:2px;
    }

    .textbox {
    font-family:Verdana,Tahoma,Arial,Sans-Serif;
    font-size:10px;
    color:#000;background-color:#fdfdfd;
    border:1px #4682B4 solid;
    }

    .main-body {
    font-size:11px;
    color:#000;background-color:#f0f0f0;
    padding:3px 4px 3px 4px;
    }

    .side-body {
    font-size:10px;
    color:#000;background-color:#f0f0f0;
    padding:3px 4px 3px 4px;
    }

    .main-bg {
    background-color:#dfdfdf;
    padding:0px 11px 4px 11px;
    }

    .border { border:0px #fff solid; }

    .side-border-left { background-color:#dfdfdf; padding:0px; }
    .side-border-right { background-color:#dfdfdf; padding:0px; }

    .news-footer {
    font-size:9px;
    color:#000;background-color:#eee;
    border-top:1px #ccc solid;
    padding:2px 4px 4px 4px;
    }

    .barmain {
    font-family:Verdana,Tahoma,Arial,Sans-Serif;
    font-size:10px;
    color:#000;
    padding:4px 4px 4px 4px;
    }

    .capmain {
    font-family:Verdana,Tahoma,Arial,Sans-Serif;
    font-size:11px;
    color:#fff;background-color:#eee;
    padding:5px 0px 12px 0px;
    background-image: url(images/capm.gif);
    background-repeat: repeat-x;
    width: 100%;
    }

    .scapmain {
    font-family:Verdana,Tahoma,Arial,Sans-Serif;
    font-size:11px;
    height: 34px;
    text-align: center;
    color:#fff;background-color:#dfdfdf;
    padding:5px 0px 12px 0px;
    background-image: url(images/capm.gif);
    background-repeat: repeat-x;
    width: 100%;
    }

    .tbl-border {
    background-color:#ccc;
    }
    .tbl {
    font-size:11px;
    padding:4px;
    }
    .tbl1 {
    font-size:11px;
    color:#000; background-color:#fff;
    padding:4px;
    }
    .tbl2 {
    font-size:11px;
    color:#000; background-color:#eee;
    padding:4px;
    }

    .forum-caption {
    font-size:10px;font-weight:bold;
    color:#000;background-color:#ddd;
    height:20px;
    padding:0px 4px 2px 4px;
    }

    .quote {
    color:#000;background-color:#eee;
    padding:2px;
    margin:0px 20px 0px 20px;
    border:1px #ccc solid;
    }

    .poll { height:12px; border:1px #000 solid; }

    .comment-name { font-weight:bold; color:#666; }

    .shoutboxname { font-weight:bold; color:#666; }
    .shoutbox { color:#666; }
    .shoutboxdate { font-size:9px; color:#000; }

    .small { font-size:10px; font-weight:normal; }
    .small2 { font-size:10px; font-weight:normal; color:#666; }
    .side-small { font-size:10px; font-weight:normal; color:#000; }

    .side-label {
    background-color:#fdfdfd; padding:2px;
    border-top:1px #4682B4 solid;
    border-bottom:1px #4682B4 solid;
    }

    img {border:0px;}
    .gallery { padding: 16px 0px 8px 0px; }
    .gallery img { border: 1px solid #ccc; filter: gray; }
    .gallery:hover img { border: 1px solid red; filter: none; }
    img.activegallery { border: 1px solid green; filter: none; }