Wie bekomme ich den Background bei egal welcher auflösung immer 100% @ tutorials.de: Tutorials, Forum & Hilfe

ONCLEMO · 07.08.07 12:02

Ich habe folgendes Problem ich habe eine Webseite erstellt und möchte das der Background immer 100% dargestellt wird egal bei welcher Auflösung . Ich habe das problem versucht über ein javascript zu lösen aber es funktioniert nicht wirklich der hintergrund wird zwar skaliert aber es zerschiest mir mein layout .
Vielleicht kann mir jemand mit einem kleinen script oder einer hilfestellung behilflich sein
vielen dank
ONCLEMO

Maik · 07.08.07 12:13

Hi,

sprichst du mit "Background" von einer Hintergrundfarbe oder von einem Hintergrundbild, und wie lautet denn der Quellcode (HTML + CSS) des Dokuments?

ONCLEMO · 07.08.07 12:22

Ich spreche von einem Hintergrund BILD.....
hier ein beispiel http://www.ratemydrawings.com/index.php
so wie sich dort der Hintergrund je nach Bildschirmauflösung skaliert so hätte ich das auch gerne . Hab versucht mir dies aus dem quellcode auszulesen checks aber irgendwie nicht ?

Vielen Dank für die antwort

P.S.
Die seite die ich erstellt habe ist eine einfache HTML .

mr_arrogant · 07.08.07 12:26

Wenn man sich mal das Hintergrund Bild anschaut müsste einem doch klar werden wie man das Realisieren könnte: http://www.ratemydrawings.com/images/rmd_bg.jpg

Ohne mir den Quellcode anzuschauen tippe ich einfach auf eine Zentrierte Tabelle oder ein zentriertes DIV welches als Hintergrund eben das obige Image beinhaltet. Der gesamte Body hat einfach nur eine Hintergrundfarbe und inmitten des Bildes mit dem weißen bereich liegt ein weiteres positioniertes DIV oder eine Tabellenzelle die dann den Content beinhaltet.

mfg
mr-d

Maik · 07.08.07 12:27

In dem vorliegenden Fall wird das Hintergrundbild aber nicht skaliert, was technisch auch garnicht möglich ist, sondern lediglich mit der CSS-Eigenschaft background-repeat:repeat-y vertikal wiederholt.

Hier der relevante Auszug aus dem Stylesheet:

Code :

body {
background-image:url(../images/rmd_bg.jpg);
background-repeat:repeat-y;
background-position:top center;
}

Maik · 07.08.07 12:36

Nachtrag: Wenn das Hintergrundbild den vertikalen Anzeigebereich des Browserfensters auch dann vollständig ausfüllen soll, wenn der Seiteninhalt es (noch) nicht tut, dann erweiterst du das Stylesheet eben mit folgender Regel:

Code :

1
2
3

html,body {
height:100%;
}

ONCLEMO · 07.08.07 13:51

schonmal vielen dank an alle die mir geantwortet haben ..

so , mein problem hab ich immer noch ....
vielleicht ist dies ein besseres beispiel
http://www.cssplay.co.uk/layouts/background.html
dieses backgroundbild skalliert sich je nach auflösung immer 100% Breite und Höhe

Ich habe ein 3zeilen und 3 spalten layout gemacht und habe mein BG bild im Dreamwaver unten über die eigenschaften eingebunden. es hat den wert Breite und Höhe 100%

Maik · 07.08.07 13:57

In Stu Nicholls' Beispiel handelt es sich aber nicht um ein Hintergrundbild, sondern um ein Grafikelement (img), das im Viewport skaliert wird.

Um es nochmal klar zum Ausdruck zu bringen: Ein Hintergrundbild (background-image) lässt sich nicht mit CSS im Viewport skalieren, sprich beim Verändern der Fenstergröße verkleinern bzw. vergrößern.

ONCLEMO · 07.08.07 14:26

hm versteh nicht ganz was heisst "Viewport" ?

Und wenn ich dieses script bei einem bild anwende dann funktioniert es aber wiegesagt die inhalte gehen verloren bzw. werden nicht dargestellt.mittlerweile hab ichs auch noch zerschossen ...shit aber so inetwa siehts aus

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Bildgröße </title>
<script type="text/javascript">
<!--

function Fensterweite()
{
if (window.innerWidth) return window.innerWidth;
else if (document.body && document.body.offsetWidth) return document.body.offsetWidth;
else return 0;
}

function Fensterhoehe()
{
if (window.innerHeight) return window.innerWidth;
else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
else return 0;
}

/*Überwachung von Netscape initialisieren*/
if(!window.alteWeite && window.innerWidth)
{
window.onresize = neuAufbau;
Weite = Fensterweite();
Hoehe = Fensterhoehe();
}

function neuAufbau()
{
if (Weite != Fensterweite() || Hoehe != Fensterhoehe())
window.history.go(0);
}

//-->
</script>
</head>
<script type="text/javascript">
<!--
/*Überwachung von MS Internet Explorer initialisieren*/
if(!window.Weite && document.body && document.body.offsetWidth)
{
window.onresize = neuAufbau;
Weite = Fensterweite() -50;
Hoehe = Fensterhoehe() -50;
}
//-->
</script>
<script language="Javascript">
<!--
document.write("<img src="gps_bg.jpeg" width= "+Weite +" height= "+Hoehe +">");

//-->
</script>

<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<table width="100%" height="100%" border="0" background="gps_bg.jpg">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body></html>

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Bilder über Text - Egal welche Auflösung!

Leere Webseite, und zwar immer! Egal bei welchen Webserver!

Bild immer am unteren Bildrand ausrichten (Auflösung muss egal sein)

Startseiten Logo zentrieren egal welcher browser

wert in tabelle immer 127, egal was ich eintrage?

E-Mail:

Abonnieren Abbestellen