Ergebnis 1 bis 3 von 3

Thema: Hintergrundbild an Auflösung anpassen

  1. #1
    Unregistriert
    Gast

    Unglücklich 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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hintergrundbild an Auflösung anpassen

    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;
    Geändert von sejuma (13.11.2008 um 08:13 Uhr)

  3. #3
    Unregistriert
    Gast

    Standard AW: Hintergrundbild an Auflösung anpassen

    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; }

Ähnliche Themen

  1. Schriftgröße zur Auflösung anpassen
    Von chris90night im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 20.11.2006, 18:30
  2. Seite der Auflösung anpassen
    Von im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 02.11.2006, 09:56
  3. Antworten: 4
    Letzter Beitrag: 03.09.2006, 16:49
  4. Auflösung anpassen die 10.
    Von Smint im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 10.04.2005, 18:02
  5. Auflösung anpassen
    Von Stalkerz im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 24.03.2005, 13:25

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •