Hintergrundbild Fehler

    Hallo an alle.
    Habe ein Turnierscript gebaut wo man in einem Formular ein LINK zu einem BILD einfügen kann.

    Siehe hier

    Der link wird in meiner Datenbank Tabelle abgespeichert in einer Tabelle im Feldnamen

    hintergrundbild
    Bild Link ist

    http://multigame-liga.de/meinedaten/1.jpg

    Mein Problem ist nun, das das bild sich mehrfach wiederholt und sogar je nach dem welchen Monitor man benutzt nie im im Vollbild anzeigt
    was kann ich machen das die seite sich jedem Monitor anpasst bzw das Bild..

    Habe folgende Dateien:
    liga_start.html
    Inhalt

    HTML
    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
$popup<style type="text/css">.kopf	{	background:$liga_daten[tabellenkopffarbe];}.text	{	background:$liga_daten[tabellenzellenfarbe];	font-size:12px;}</style>
</head><body background="$liga_daten[hintergrundbild]" bgcolor="$liga_daten[hintergrundfarbe]" text="$liga_daten[textcolor]" link="$liga_daten[linkfarbe]" vlink="$liga_daten[vlinkfarbe]" alink="$liga_daten[alinkfarbe]">
<center><font size="+2">Willkommen auf der HP der Liga $liga_daten[liganame]</font><br><br>
$banner</center><br><br>
<table width="800" border="0" cellpadding="0" cellspacing="0"> <tr>  <td width="30"></td>  <td width="740">   <table width="740" border="0" cellpadding="0" cellspacing="0">    <tr>     <td width="520" valign="top">$liga_daten[willkommen]</td>     <td width="220" align="center" valign="top">      <table width="160" border="0" cellpadding="0" cellspacing="0">       <tr>        <td width="160" class="kopf" align="center">Top 20 Rangliste</td>       </tr>       <tr>        <td width="160">         <iframe src="../onlineliga/ts/top20.php?liga=$liga_daten[liganame]" height="300" width="160" scrolling="auto" frameborder="1"></iframe>        </td>       </tr>      </table>     </td>    </tr>    <tr>     <td colspan="2" height="20"></td>    </tr>    <tr>     <td colspan="2" width="740">$inhalt</td>    </tr>   </table>  </td>  <td width="30"></td> </tr></table></body></html>


    Ich muss aber dazu sagen, das im obrigen Quellcode nichts rausgenommen werden darf.

    - - - Aktualisiert - - -

    Habe schon folgendes versucht:
    test.css erstellt mit dem inhalt:

    HTML
    html, body{background-size: 100% !important;}


    Dann in meine liga_start.html zb folgendes an verschiedenen stellen eingefügt

    HTML
    <html lang="de">  <head>    <link rel="stylesheet" href="test.css"><body style="background-image:url(http://multigame-liga.de/meinedaten/1.jpg)">

    Bisher hat nicht geklapt.
    Wer kann mir Helfen danke im vorraus.

    Versuche mal, dein Stylesheet um folgendes zu erweitern:

    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; /* statt deiner size-Anweisung */

    dadurch sollte das Hintergrundbild, ohne Wiederholung den gesamten Bereich ausfüllen. Das Seitenverhältnis des Bildes bleibt erhalten - also es verzerrt nicht! Aber es wird immer die kleinere Bildseite als Maß genommen, um das Bild in den Anzeigebereich einzupassen. Kann bei mobilen Geräten bei portrait... und landscape zum Abschneiden der Bildränder führen. Ggf hilft dann eine @media-Query, die im Hoch- und Querformat unterschiedliche Hintergrundbilder einblendet!

    if(!sleep)

    {$sheep++;}

    HAb das nun so gemacht

    HTML
    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
$popup<style type="text/css">.kopf	{	background:$liga_daten[tabellenkopffarbe];}.text	{	background:$liga_daten[tabellenzellenfarbe];	font-size:12px;}background-repeat: no-repeat;background-attachment: fixed;background-size: cover;}</style>

    Allso am Laptop seh ich zb vollbild am Handy 4 untereinander und am PC meines sohnes 2x untereinander
    Komisch

    - - - Aktualisiert - - -

    Glaub so liest sich es besser

    Die Syntax des CSS ist nicht ganz richtig! Welchem Element willst du das Hintergrundbild zuweisen?... dem body?
    dann so:

    HTML
    body {
background-color: Farbe; /*Fallback*/
background-image: url("pfad/bildname.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

    if(!sleep)

    {$sheep++;}

    Danke erst einmal aber auf handy immer noch 4 mal zb bin ich zu doof ;)

    - - - Aktualisiert - - -

    Oha sorry habe nun an 3 Monitoren geschaut hat geklapt blos am Handy S3 sind 3x untereinander.

    - - - Aktualisiert - - -

    Blos wäre es gut wen man in deinem code den link in datenbank abrufen könnte allso beispiel jemand trägt ein link zu einem bild ein in meinem formular
    der Link wird in meiner DATENBANK eingetragen siehe in meinem SCRIPT

    Code
    background="$liga_daten[hintergrundbild]

    Der befehlt bewirkt das der Bild Link in meiner Datenbank abgerufen wird kann man das in deinem code irgentwie einbauen weil sonst müsste man ja immer die HTML ändern mein Turnierscript bedeutet da können sich xxxxx user Seiten erstellen und Turniere spielen aber wen einer anderes bild haben will ist ja blöd.

    - - - Aktualisiert - - -

    Zb so

    Code
    body {background-color: Farbe; /*Fallback*/
background="$liga_daten[hintergrundbild]
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

    - - - Aktualisiert - - -

    So habs nun geschaft

    Code
    }body {
background-color: Farbe; /*Fallback*/
[COLOR=#ff0000]background:$liga_daten[hintergrundbild];[/COLOR]
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

    Blos wen man noch was machen könnte das auch auf den Handys alles so angezeigt wird wäre super
    Danke im vorraus

    Da bin ich etwas überfragt, wie das mit mit dem Script und dem Zuweisen des Wertes aus der Datenbank (Bild) funktionieren soll - also probiere es aus. Wenn es vorher so im CSS geklappt hat, dann seh ich keinen Grund, warum das nicht wieder klappen sollte.
    Aber zurück zur ursprünglichen Frage... 3 Bilder untereinander sollten nicht sein... no-repeat heißt no-repeat ... auch auf einem SmartPhone.
    Allerdings sind da einige Ungereimtheiten in deinem Code, mal abgesehen davon, dass du mit xhtml eine ziemlich veraltete HTML Version nutzt.
    Wenn du Formate im Stylesheet für den body festlegst, dann solltest du diese nicht im Body-Tag wiederholen und auf diese Weise ggf durch die Werte im Tag überschreiben.
    Also was geht im Stylesheet definieren:

    HTML
    body {background-color: #122A0A;
background=$liga_daten[hintergrundbild];
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: #F7FE2E;
}


    und den Body-Tag dann nur

    HTML
    <body link="#F7FE2E" vlink="#F7FE2E" alink="#F7FE2E">


    Ob das mit dem Link aus der Datenbank aber so klappt, da kann ich dir nicht weiterhelfen.

    if(!sleep)

    {$sheep++;}

    Einmal editiert, zuletzt von Sailor (19. Oktober 2017 um 19:43)