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?
Webpage Hintergrundgröße?
- Themenstarter Lunam
- Beginndatum
M
Maik
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
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
Dr Dau
ich wisch hier durch
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
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
M
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?
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?
Anhänge
M
Maik
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
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
M
Maik
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
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
M
Maik
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
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
Neue Beiträge
-
-
-
-
Python Formatter-Dilemma = Python-Dilemma?
- Letzte: jemand anders
