Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Hingrundbild HP

Gast vivadaloca
Gast vivadaloca
in Webdesign

Empfohlene Antworten

Veröffentlicht

Guten Tag,

Ich versuche für unsere HP, ein Hintergrund bild zu Basteln ,doch irgendwas mit den Grössen passt da garnicht,was für Programme kann man den Kostenlos ,dafür benutzen.

Möchte Blumen in den Hintergrund einbauen,für einen Onlineshop.

Über Tipps wäre ich sehr erfreut.

DANKE:D

Bildbearbeitung?

The Gimp

paint.net

Gimp habe ich ,Shop breite ist 978 px,doch wie stelle ich die länge ein ,so das der hintergrund sich nicht verzieht.

Wie bitte?

Ich glaube das soll so eine Art Skalierung werden, also das Hintergrund will soll immer passend skaliert werden. Aber bitte einmal das Problem genauer beschreiben

Wenn Du die Größe verändern willst musst Du ggf darauf achten, dass Du proportional vergößerst

Phil

Also das Problem liegt darin ,wenn ich z.b das bild in eine grösse von 1024 mal 768 mache .Es zu gross angezeigt wird .

Wollte es halt als Hintergrundbasis für unseren shop.

Genau das was hier im shop ,weis ist an den seiten falls das weiterhilft.

Es geht um eine Skalierung innerhalb eines HTML bzw CSS Dokumentes, so dass eine Pixelgraphik immer auf die Browserbreite automatisch skaliert wird. Das ganze soll dann in XT-Commerce genutzt werden (per ICQ herausgefunden)

Phil

Am einfachsten wäre, mittels Javascript abhängig von der Auflösung ein passendes Hintergrundbild für den Body auszuwählen. Der zweite Weg wäre, direkt nach <body> ein absolut positioniertes Bild einzufügen, dass dann per JS skaliert und positioniert wird.

Etwas anderes, verlässliches, ist nicht möglich.

kannst auch per z-index arbeiten...

machst folgendes: du haust den Inhalt deines body-tags in eine div-Box und vergibst den z-index 1 per css.

als nächstes nimmst du eine weitere div-Box und haust da ein bild rein, dessen width du auf 100% setzt. in den heutigen Browsern wird die höhe automatisch angepasst. dann vergibst du der div box den z-index wert 0 und kombinierst das mit position:absolute und positionierst das mit top:5px; left:5px; beides oben links... mit dem z-index hast du dann die layerkontrolle...

Beispiel-Code:


<html>

	<head>

		<style>

			div.frontLayer{z-index:1; width:100%; position:absolute; top:5px; left:5px;}

			div.backLayer{z-index:0; width:100%; position:absolute; top:5px; left:5px;}

		</style>

	</head>

	<body>

		<div class="backLayer">

			<img src="./Namenlos.png" width="100%">

		</div>

		<div class="frontLayer" >

			test test test test test test test test test test test test test test test test test <br>

			test test test test test test test test test test test test test test test test test <br>

			test test test test test test test test test test test test test test test test test <br>

			test test test test test test test test test test test test test test test test test <br>

			test test test test test test test test test test test test test test test test test <br>

			test test test test test test test test test test test test test test test test test <br>

			test test test test test test test test test test test test test test test test test <br>

			test test test test test test test test test test test test test test test test test <br>

		</div>

	</body>

</html>

Hoffe, dir wurde damit geholfen...

Grüße, V

Und wie verhalten sich Bildschirme unterschiedlichen Verhätlnisses in Bezug auf Breite/Höhe des Bildes?

Erstelle ein Konto oder melde dich an, um einen Kommentar zu schreiben.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.