kostenloser Webspace werbefrei: lima-city


Hintergrundgrafik wird nicht richtig angezeigt.

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    lol-2015

    lol-2015 hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    So richtig schlau werde ich aus deiner Frage nicht. Was bedeutet "nicht richtig"?

    Wenn man schon nicht selbst sehen kann, was los ist, musst du das mal genauer beschreiben. Manchmal ist es aber am einfachsten, wenn man das Ergebnis sieht.

  4. @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
  5. @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;
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!