Hintergrundbild Fehler

MichaelKRI

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.

Sailor

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!

MichaelKRI

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

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>

Alles anzeigen

Sailor

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

MichaelKRI

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

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;
}
body {
background-color: Farbe; /*Fallback*/
background-image: url("http://multigame-liga.de/meinedaten/1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>

Alles anzeigen

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

Sailor

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.

Tags