Wir sollen in der Uni eine Webpage selber programmieren mit Dreamweaver und ich möchte als hintergrund ein selbsterstelltes bild (mit Photoshop) hernehmen. Wisst ihr wie groß ich das Bild in etwa machen muss damit es so groß ist wie eine Seite wo man nicht scrollen muss? Ich will das bild nämlich nicht verzerren oder strecken oder so damit es gut passt. Gibts da so ne normgröße?

Hi,

es gibt hier keine Normgröße; aus dem einfachen Grund, weil neben den diversen Monitorauflösungen auf dem Markt, auch die Größe des Browserfensters variieren kann, denn nicht jeder Seitenbesucher surft zwingend mit seinem Browser im "Vollbildmodus".

Desweiteren können im Browserfenster zusätzliche (Werkzeug-)Leisten und/oder Sidebars aktiviert sein, die den Anzeigebereich entsprechend verringern.

Da heißt es, das gesunde Mittelmaß zu finden

Wenn ein Seitenlayout mit fester Breite gewünscht / gefordert wird, orientiere ich mich z.Zt. an der "1024*768px"-Auflösung, und setze die Breite zwischen 800 u. 900 Pixel.

Wenn der Viewport im User-Agent dennoch aus o.g. Gründen zu klein ausfällt, und ein Scrollbalken erscheint, ist dies auch kein Beinbruch.

mfg Maik

Hallo!

Da Netbooks ja gross in Mode sind, sollte man auf deren Auflösung auch Rücksicht nehmen.
Üblicherweise beträgt dort die Auflösung 1024x600, es gibt aber auch schon welche mit 1366x768 (wird die Lupe eigentlich gleich mitgeliefert? ).
Daraus ergibt sich meiner Meinung nach eine obere Schmerzgrenze von 1000px Breite.
In der Höhe lässt sich das scrollen i.d.R eh nicht vermeiden..... liegt der Anzeigebereich (Viewpoint) doch deutlich unter den 600px Höhe (je nach Betriebssystem und dessen Einstellungen, dem Browser und dessen Einstellungen, dürfte der maximale Viewpoint (bei 1024x600) wohl irgendwas um die 400px Höhe betragen).

Gruss Dr Dau

Zitat von Dr Dau

der Anzeigebereich (Viewpoint) [ ...] der maximale Viewpoint

Viewport, nicht Viewpoint

mfg Maik

Ich hab das jetzt mal mit der größe daheim gemacht und habs jetzt bei nem anderen Bildschirm anzeigen lassen dann siht das ganz so aus (siehe anhang)

Das heißt wenn ich es im browser zum Test anzeigen lassen will skalliert es das nicht aud die Bildschirm größe sondern lässt es so das heißt auf manchen Bildschirmen schneidet es was ab oder zeigt es zu groß an.

Wie kann ich das Hintergrundbild so skalieren, dass es bei jeder Auflösung richtig angezeigt wird?

Hi,

CSS3 bietet background-size (siehe http://www.css3.info/preview/background-size) zum Skalieren eines Hintergrundbildes, was aber noch nicht von allen aktuellen Browsern interpretiert wird.

Von daher wäre hier bis auf weiteres ein Workaround vonnöten, wie ihn Stu Nicholls mit http://www.cssplay.co.uk/layouts/background.html vorstellt.

mfg Maik

und für einen ie heißt das?

muss ich schon bei dem Photoshopbild das ich als hintergrund verwenden möchte schon was ändern oder kann ich das normal als jpeg und pixel abspeichern oder muss ich in dreamweaver einen bestimmten code eingeben damit es das skaliert?

Mit dem JPG- oder PNG-Format bist du da bestens aufgestellt.

Bei der Dimensionierung solltest du darauf achten, die Grafik eher größer ausfallen zu lassen, ähnlich wie bei http://www.cssplay.co.uk/layouts/rabbit.jpg, damit sie im Viewport des Browsers herunterskaliert wird.

Fällt sie zu klein aus, läufst du ansonsten Gefahr, dass das Motiv beim Hochskalieren verpixelt erscheint.

Die Skalierung erfolgt dann über die relative Breiten- und Höhenangabe im CSS (width:100% u. height:100%).

mfg Maik

irgendwie klappt das nicht ich hab mal paar screens gemacht.

Das hintergrundbild ist 1280x800 pixel

es hat sich immer noch nicht angepasst oder hab ich was falsch gemacht?

Das Hintergrundbild mußt du in ein <img>-Grafikelement umwandeln, und den Seiteninhalt in der Schichtposition z-index darüber positionieren, denn das Hintergrundbild (background-image) lässt sich ausschließlich mittels der angesprochenen background-size-Eigenschaft skalieren, das <img>-Element hingegen über die width- und height-Eigenschaft.

Schau dir hierzu bitte mal den Quellcode meines empfohlenen Beispiels http://www.cssplay.co.uk/layouts/background.html genauer an. Dort taucht im CSS keinerlei Angabe für ein Hintergrundbild auf.

mfg Maik

und wie wandle ich das um? Sorry ich bin da ein vollkommener Anfänger und unser Lehrer bringt uns da auch nicht grad viel bei ._.

Deinen Lehrer danach zu fragen ist dir nicht möglich?

Und den Quellcode meiner jetzt mehrfach empfohlenen Seite kannst du auch nicht lesen und studieren?

HTML-Code:

<body>

<!-- Dieses Grafik-Element ersetzt das Hintergrundbild -->
<img id="background" src="deine-hintergrundgrafik.jpg" alt="" title="" /> 

</body>

Und dann im Ganzen:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation </title>

<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style>
</head>

<body>

<div>
<img id="background" src="rabbit.jpg" alt="" title="" /> 
</div>
<div id="fixed">
<p>The background image is always 100% x 100% (body size). But it only works with a 100% x 100% html/body.</p>
<p><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=100% background image" title="Your comments">Comments</a></p>
<a href="http://web.top.org/css/" title="CSS (Design) - TOP.ORG"><img style="border:none;" src="http://img1.top.org/toporg_1667.gif" alt="CSS (Design) - TOP.ORG" /></a>

</div>
<div id="scroller">
<div id="content">

<h1>Hier folgt der Inhalt</h1>

</div>
</div>

</body>
</html>

mfg Maik