Der Martin: Skalierung von Bildgrößen entsprechend der Browsergröße

Beitrag lesen

SELF-Forum

Skalierung von Bildgrößen entsprechend der Browsergröße

Der Martin
+1 Informationen zu den Bewertungsregeln

Hallo,

Also wie ihr wisst, fahren je verschiedene Nutzer mit unterscheidlichen Auflösungen, und da ich möchte, dass mein Hintergrundbild immer komplett über das ganze Fenster geht, habe ich bisl getrickst. Funzt, soweit so gut.

ja, verwechsle aber bitte nicht Bildschirmauflösung und Fenstergröße; das eine hat mit dem anderen nichts zu tun. Das Prinzip, ein absolut positioniertes img-Element anstatt eines Hintergrundbilds zu nehmen, ist nicht neu, im Gegenteil: Inzwischen können dank CSS3 (background-size) alle erwähnenswerten Browser. Okay, IE8 nicht, aber dann bekommt der halt ein unskaliertes Hintergrundbild, so what.

Nur habe ich normale Bilder eingefügt ...

Nein. Wie aus deinem Code hervorgeht, besteht kein Unterschied zwischen dem, was du Hintergrund nennst, umd dem, was du "normale Bilder" nennst. Alle sind absolut positioniert und damit komplett aus dem Elementfluss herausgelöst.

Ich will die jedoch genau wie das Hintergrundbild angepasst haben.

Was heißt das genau?

html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

Nicht gut. Gar nicht gut. Was ist, wenn der darzustellende Inhalt größer ist als das Browserfenster? Dank overflow:hidden ist ein Scrollen nicht möglich, also ist ein Teil des Inhalts nicht erreichbar.

#scrollbereich {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:auto;
  z-index:2;
}

Ach. So baust du das, was eigentlich body sein sollte, wieder nach? Für mich unlogisch.

<body>
<div>
<img id="hintergrund" src="Grafiken/Webseite/back.png" alt="Hintergrund" title="Hintergrund" />
</div>

Warum steckst du das sogenannte Hintergrundbild nochmal in einen Container? Und warum das Schließen des img-Elements im XHTML-Stil, obwohl ansonsten nichts auf XHTML hindeutet?

  <img id= "3d-earth" src="Grafiken/Webseite/3d-earth.png" alt="3d-earth" title="3d-earth" />

Fehler: IDs dürfen in HTML 4 nicht mit einer Ziffer beginnen.

  			<style type="text/css">

Fehler: style-Elemente dürfen nur innerhalb von head vorkommen.

  			#3d-earth{  
  			position: absolute;  
  			width: 900px;  
  			height: auto;  
  			left: -350px;  
  			top: -350px;  
  			z-index:2;

Du willst das Bild teilweise weit außerhalb des Browserfensters positionieren? Wieso das?

Ich gebe dir insgesamt einen guten Rat:

1. Lerne HTML.
 2. Fang frisch an, denk dabei im ersten Moment überhaupt nicht ans Aussehen, sondern
    nur an die logische Struktur.
 3. Lerne CSS.
 4. Gestalte das in 2. erstellte Dokument mit CSS.

Bei diesem Prozess sind wir dir gern behilflich, aber vergiss bitte erstmal alles bisherige.

So long,
 Martin

--
Disziplin: Teppichböden wiederfinden, wenn man sie verlegt hat.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
Beitrag melden
+1
Informationen zu den Bewertungsregeln