Hintergrundgrafik wird nicht richtig angezeigt.
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anlehnung
art
beispiel
beliebiges container
bild
button
code
doppelte angabe
eigenschaft
element
entsprechende dokumentation
ergebnis
foto
frage
hintergrundbild
http
kleineren monitoren
leute
url
wert code
-
Hallo Leute,
Ich brauche eure Hilfe!
Ich habe mir eine Hintergrundbild gemacht aber mein großes Problem ist das die Grafik nicht richtig angezeigt wird bei kleineren Monitoren.
Hier ist mein css code.
body { font-family: Helvetica, Arial, sans-serif; background: #a6d701 url(f.gif) no-repeat bottom left; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: 16px; padding: 0 0 420px 0; }
Beitrag zuletzt geändert: 25.4.2015 10:17:22 von lol-2015 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
@lol-2015
Leider geht aus deiner Frage nicht hervor wie du es haben möchtest
und was du meinst mit "...nicht richtig angezeigt...".
Aus deinem css-code ist das nicht zu ersehen,
u.a. enthält er doppelte Angabe zu font-family und ein merkwürdiges 420px Innenabstand-Unten(padding-button).
Für was benötigst du diese 420px ??
Was für eine Art Bild ist denn eigentlich das "f.gif" (wie gross ist das genau in Höhe&Breite und ist das ein Foto oder nur ein StrukturMuster)?
Vielleicht hilft es dir ja weiter wenn ich mal ein vollständiges HTML-Beispiel zum Thema Hintergrund-Bild mache(siehe Code unten).
Ein Hintergrundbild kann z.B. nicht nur auf das body-element gesetzt werden,
sondern natürlich auch auf das html-element oder ein beliebiges container-element(z.B. div) innerhalb des body-elements.
Hier findest du entsprechende Dokumentation zu css "background" : http://www.w3schools.com/cssref/css3_pr_background.asp
Hier nur ein übersichtliches HTML-Beispiel, in Anlehnung an den von dir skizzierten css-code.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test Hintergrundbild</title> <style> html { min-width: 100%; min-height: 100%; } body { background-color: rgb(166, 215, 1); /* color|transparent|initial|inherit */ background-image: url(f.gif); /* url|none|initial|inherit */ background-repeat: no-repeat; /* repeat|repeat-x|repeat-y|no-repeat|initial|inherit */ background-attachment: scroll; /* scroll|fixed|local|initial|inherit */ background-position: left bottom; /* Alternativen: background-position: left 420px; background-position: left -420px; */ -webkit-background-clip: content-box; -moz-background-clip: content-box; -o-background-clip: content-box; -ms-background-clip: content-box; background-clip: content-box; /* border-box|padding-box|content-box|initial|inherit */ -webkit-background-origin: content-box; -moz-background-origin: content-box; -o-background-origin: content-box; -mx-background-origin: content-box; background-origin: content-box; /* padding-box|border-box|content-box|initial|inherit */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover; /* auto|length|cover|contain|initial|inherit */ padding-bottom: 420px; /* ????Warum 420px Innenabstand-Unten???? */ padding-left: 0px; padding-right: 0px; padding-top: 0px; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: 16px; } </style> </head> <body> <div style="font-size: 40vw; overflow: hidden; color: rgba(255, 0, 0, 0.5); outline: 2vw solid; text-align: center; max-height: 100%; max-width: 100%; outline-offset: -2vw;">XXX</div> </body> </html>
Beitrag zuletzt geändert: 26.4.2015 15:59:23 von lumix -
@lol-2015
Dem Bild in der background-Eigenschaft fehlt die Größenangabe. Versuch doch mal diesen Background-Wert:
background: url(f.gif) bottom left / contain no-repeat, #a6d701; -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage