Thema: <body> mit top und bottom image

pc-deluxe · **am:** 25. April 2012, 07:37:59

Hallo,

ich habe eine Frage ist es möglich, 2 Bilder anzeigen zu lassen im body?

top: [ Für Gäste sind keine Dateianhänge sichtbar ]
bottom: [ Für Gäste sind keine Dateianhänge sichtbar ]

wie man sehen kann ist nur ein Hintergrund im top und nicht im bottom. Dies würde ich aber gerne so umsetzen.

Meine Lösung war in der "index.html":

<div style="background: url(http://www.deineSeite.de/templates/xtc5/img/footer.png) repeat-x left bottom; position: relative; width: 100%; height: 172px; float: none; z-index: -1;"></div>

Nachdem ich das eingetragen hatte war zwar das Bild zu sehen, aber es entstand ein "Rand/Absatz" und es war nur sichtbar beim "Login". Beim nicht angemeldeten User war war der Hintergrund nicht sichtbar. Cache wurde immer gelöscht beim testen. Wäre schön wenn mir jemand Helfen könnte.

Danke und viele Grüße
Dirk

Linkback: https://www.modified-shop.org/forum/index.php?topic=19693.0

webverwalter · **Antwort #1 am:** 25. April 2012, 08:15:49

Als erstes mal Abstände zurück setzen:

Code: CSS [Auswählen]

html, body { padding: 0; margin: 0; }

und danach

Code: CSS [Auswählen]

html { background: url() 0 0 no-repeat; }
body { background: url() 0 100% no-repeat; }

Hoffe, ich habe dich richtig verstanden

thomas.

pc-deluxe · **Antwort #2 am:** 25. April 2012, 08:30:03

Hey Thomas,

ist das für die stylesheet.css?! Wäre denke ich schöner das darüber zu definieren. Denn in der css Datei ist der "body" so okay und das Bild ist ja auch vorhanden, nur der sogenannte "Fußbereich" (bottom) ist zur Zeit nur im hellblau und ohne das Bild (footer.png). Kannst du dir gerne auf meiner Seite mal ansehen, denn siehst du denke ich eher was ich meine.

top-Bereich mit Bild ist so super
bottom-Bereich ist nur hellblau und ohne ein Bild.

Vielen Dank
Dirk

webverwalter · **Antwort #3 am:** 25. April 2012, 09:38:59

naja inline-CSS sollte man schon vermeiden.

Hast Du mal einen Link?

Matt · **Antwort #4 am:** 25. April 2012, 10:08:26

Theoretisch: Ja

Code: CSS [Auswählen]

body {
background-image: url(header.png), url(footer.png);
background-position: center top, center bottom;
background-repeat: repeat-x;
}

Praktisch: Nein, da erst vom IE ab Version 9 unterstützt. Wenn man allerdings damit leben kann, dass es ältere IEs nicht anzeigen kann man es verwenden. Oder man sucht sich einen entsprechenden Polyfill.

pc-deluxe · **Antwort #5 am:** 25. April 2012, 10:24:39

Hallo,

Danke für deine Antwort.
Genau die Lösung hatte ich bereits gefunden gehabt und hatte die auch schon eingebaut

Code: CSS [Auswählen]

body{
font-family:Arial, Sans-serif;
font-size:12px;
color: #000000;
margin: 75px auto 40px auto;
padding:0;
min-height: 100%;
height: auto;
background: #E9F3FB;
background-image: url(img/header.png), url(img/footer.png);
background-position: center top, center bottom;
background-repeat: repeat-x;
}

So sieht mein css aus, wie ich das bearbeitet hatte.
Funktioniert nur leider nicht mit IE9 (funktioniert nicht, cache überall geleert), FF 10 (funktioniert), Opera 10.x (funktioniert), Safari (funktioniert)

Sieht also soweit sehr gut aus

Vielen Dank
Dirk

Matt · **Antwort #6 am:** 25. April 2012, 11:12:51

Also bei mir funktioniert deine Seite im IE9. PNG ist aber sicherlich nicht das sinnvollste Format für deinen Hintergrund...

pc-deluxe · **Antwort #7 am:** 25. April 2012, 12:00:55

Hey Matt,

welches Bild-Format wäre denn besser?

Viele Grüße und Danke
Dirk

Matt · **Antwort #8 am:** 25. April 2012, 13:54:52

Für den konkreten Fall kanz klar JPEG, weil es bei guter Komprimierung nur 1/5 so groß ist.

pc-deluxe · **Antwort #9 am:** 26. April 2012, 12:42:09

Hallo Matt,

die Bildchen die ich verwende sind nur 20kb groß, ist das zu viel?!

Viele Grüße
Dirk

Matt · **Antwort #10 am:** 26. April 2012, 15:19:08

Sagen wir es mal so: Da ist performancetechnisch sehr viel Luft nach oben:
http://www.webpagetest.org/result/120426_HA_43GZM/

Kleinere Bildchen (bzw. einfach das passende Format je nach Bild) wären da mal ein Anfang.

pc-deluxe · **Antwort #11 am:** 26. April 2012, 15:26:01

Hey Matt,

hab mir das eben mal angesehen, meine Seite brauch ca. 9s wenn ich das richtig gesehen habe?!
Da kann man wirklich noch etwas rausholen. Was wären denn die "Dornen" im Auge?

Danke
Dirk

Matt · **Antwort #12 am:** 26. April 2012, 16:25:29

Guckst du hier: http://www.modified-shop.org/forum/index.php?topic=17967

Zusätzlich: Die 404er eliminieren.

Thema: <body> mit top und bottom image

pc-deluxe

<body> mit top und bottom image

webverwalter

Re: <body> mit top und bottom image

pc-deluxe

Re: <body> mit top und bottom image

webverwalter

Re: <body> mit top und bottom image

Matt

Re: <body> mit top und bottom image

pc-deluxe

Re: <body> mit top und bottom image

Matt

Re: <body> mit top und bottom image

pc-deluxe

Re: <body> mit top und bottom image

Matt

Re: <body> mit top und bottom image

pc-deluxe

Re: <body> mit top und bottom image

Matt

Re: <body> mit top und bottom image

pc-deluxe

Re: <body> mit top und bottom image

Matt

Re: <body> mit top und bottom image

Teile Thema

Ähnliche Themen

ANLEITUNG: Image Slider mit Image Map, verschiedene Effekte & mouseover hover

Trennstriche mit valign="bottom" ???

jQuery im body?

Shopvorstellung: Body and Parts