Hintergrund hinter optimieren

[Ladenbesitzer]

Hallo!

Ich würde bei meiner Homepage hinter dem Hauptbereich gerne ein Hintergrundbild einbinden.
Am schönsten wäre es, wenn das Hintergrundbild genauso wie der Hauptbereich mitskalieren würde.

Bisher war es so, das sich der Haupbereich beim Verkleinern mittig zum oberen Bildschirmrand verkleinerte, während sich das Hintergrundbild beim Verkleinern linksseitig zum oberen Bildschirmrand verkleinerte, so dass die Objekte sozusagen "auseinanderlaufen".

Ich wäre dankbar, wenn ihr mir helfen könntet, das zu konfigurieren.

 

[Tronjer]

Gib dem Hintergrundbild ein background-size contain oder cover, dann skaliert es mit dem Container.

 

[Ladenbesitzer]

Herzlichen Dank!

 

[Ladenbesitzer]

Toll wäre es, wenn sich der Hintergrund so verhalten würde wie z.B. auf dieser Seite:

http://www.hoh.de/hardware/ssd-laufwerke/nach-hersteller/adata/448651/adata-s510-60gb-sata-6gb/s-2.5

 

[MrMurphy]

Hallo,

mal abgesehen davon, das du dir überlegen solltest, was du deinen Besuchern mit solchen Hintergrundbildern antust kann ich überhaupt kein Verhalten erkennen. Das wird einfach nur starr zentriert angezeigt.

Das Hintergrundbild ist eine ganz normale jpg-Datei:

http://www.hoh.de/uploads/hoh/landingpage/wd-red/hoh_wallpaper_wd-red_2216x870.jpg

Was versetzt dich daran so in Ekstase? Ich kann deine Begeisterung nicht nachvollziehen.

Gruss

MrMurphy

 

[Ladenbesitzer]

Ich würde es gerne probieren.
Wie kann ich denn diese zentrierte mitskalierende Anzeige bewerkstelligen?

 

[MrMurphy]

Hallo,

ich verstehe nicht was du meinst. Was skaliert bei dem Hintergrundbild mit?

Gruss

MrMurphy

 

[Ladenbesitzer]

Das Hintergrundbild klebt an der Homepage fest und wird beim Zoomen mit vergrößert.
Das Bild bleibt immer im Verhältnis zur Homepage

Es wirkt wie aus einem Guss

 

[Tronjer]

Da skaliert nichts. Der Body besitzt eine background-color und ein background-image, welches in der Mitte Platz für den Content lässt.

 

[MrMurphy]

Hallo,

wie aus einem Guss ist die Seite überhaupt nicht. Sie ist schlicht veraltet. Dir ist schon klar, das heutzutage bereits über 50% der Internetuser mit Smartphone oder Tablet mit entsprechend geringen Fensterbreiten unterweg sind? Mit steigender Tendenz. Hast du die Seite mal auf so einem Gerät aufgerufen?

Auch der Speicherplatz des Hintergrundbildes ist grade auch für mobiles Internet eine Frechheit.

Aus heutiger Sicht ist die Seite schlicht benuzterunfreundlich und einfach nur Schrott.

Nach diesen Warnungen sollst du natürlich trotzdem eine Antwort auf deine Frage bekommen. Du musst aber versprechen nicht weiter nachzufragen, wenn du andere Funktionen in die Seite einbauen willst und die nicht wie gewünscht funktionieren. Das ist nämlich häufig die Folge von so veraltetem Code.

Du musst den eigentlichen Inhalt zentrieren und auf die Breite der schwarzen Mittelfläche bringen.

Der Code zum Einbinden des Hintergrundbildes lautet:

body {
width: 100%;
color: white;
background: url(http://www.hoh.de/uploads/hoh/landingpage/wd-red/hoh_wallpaper_wd-red_2216x870.jpg) no-repeat ;
background-position: center 0px;
background-attachment:fixed;
background-color: #000000;
padding: 0;
margin: 0 auto;
}

Du musst natürlich dein eigenes Hintergrundbild einbauen, sonst begeht du Trafficklau und verstößt gegen das Urheberrecht.

Gruss

MrMurphy

 

[Ladenbesitzer]

Es funktioniert leider nicht.
Der Link zu meiner Seite ist www.roller-aus-blech.de
PS: Sobald ich background-size entferne, verschwindet das Hintergrundbild.

body {
margin: 0 auto;
/* width: 100%;*/
font-family: arial, helvetica, sans-serif;
/* font-family: arial;*/
/* font-size: 0.72em; */
font-size: 14px;
color: #555555;
background: url("http://www.roller-aus-blech.de/includes/templates/viennabright/css/Hintergrund.jpg") no-repeat;
/* background-size: contain;*/
background-size: cover;
background-position: center 0px;
background-color: #f2f2f2;
background-attachment: fixed;
/* background-repeat:no-repeat; */
/* background-position:100px 50%; */
line-height: 23px;
padding: 0;
}

 

[Tronjer]

Es funktioniert leider nicht.
Der Link zu meiner Seite ist www.roller-aus-blech.de
PS: Sobald ich background-size entferne, verschwindet das Hintergrundbild.

Es verschwindet nicht, und mit background-position: center top steht es auch zentriert im Browser.

 

[MrMurphy]

Hallo,

das war zu erwarten, ich hatte dich doch um etwas gebeten:

Du musst aber versprechen nicht weiter nachzufragen, wenn du andere Funktionen in die Seite einbauen willst und die nicht wie gewünscht funktionieren.

Das gilt natürlich auch, wenn du den Code ohne Hintergrundwissen in bestehende Seiten einfügen willst.

(Nimm das jetzt aber bloß nicht zu ernst - ein bißchen Spass muss sein.)

Wenn ich den Code in deine Seite eingebe funktioniert er wie gewünscht.

Ich empfehle dir folgendes Vorgehen:

Du löscht im CSS in der Datei stylesheet.css alle body-Anweisungen. - ALLE!!!!! Also body komplett. Oder du markierst das als Kommentar.

Dafür kopierst du meinen Code wie er ist an der Stelle in deine CSS Datei.

Dann schaust du dir das Ergebnis an. Das bißchen Trafficklau zum Testen schadet nicht. Wenn es nicht funktioniert kannst du aufhören und alles rückgängig machen. Dann fällt mir auch nichts weiter ein.

Wenn er funktioniert ersetzt du das fremde Hintergrundbild durch dein Hintergrundbild. Das ist im übrigen viel schmaler.

Das sollte dann aber auch funktionieren.

Wenn dem so ist fügst du die gelöschten aber noch benötigten (nur die BENÖTIGTEN) CSS-Anweisungen EINZELN wieder dem body hinzu. Nach jedem Eintrag schaust du nach, ob die Seite weiterhin funktioniert.

Gruss

MrMurphy

 

[Tronjer]

@MrMurphy

Wenn dich die Langeweile plagen sollte, kann ich dir auch gerne was geben. Ich muss hier einen View refakturieren und habe Null Bock heute.

 

[Ladenbesitzer]

Vielen dank,
ich werds abarbeiten!

 

[lascaux]

Es gibt ein sehr tolles und vor allem schlankes jQuery-Skript dafür. Schau einfach mal hier nach und lies auch noch die Dokumentation dazu. Innerhalb von 2-3 Minuten hast du das Problem gelöst.