Hintergrundbild eines DIV anpassen

[MichiLetsPlay]

Hi,

ich hab folgenden Code:

(...)
#hb {          
          background-image:url(http://www.website.co.de/i/bgu.jpg);
          background-repeat:no-repeat;
          background-position:center;
          height:16px;
          width:80%;
          background-size: 100% 100%;
       }
(...)
<div align="center" id="hb"></div>

Allerdings funktioniert das mit dem background-size nicht so ganz...

Das Bild soll an die größe des DIVs angepasst werden

Weiss jemand was ich falsch gemacht habe?

Grüße

 

[Cheffchen]

Hallo,

ich seh kein fehler, hast vielleicht ein Link?
vielleicht liegts am browser da das ja css3 ist und das können halt nicht alle.

Cheffchen

 

[MichiLetsPlay]

Hi,

nur so also Info:
Ich arbeite mit Scriptly - dort wird es mir in Rot markiert - ob das einfach unbekannt ist, weiß ich nicht ;)

Also mein Code kommt von Meiner HP (Zeile 24-29 / 74).
Das "background-size: 100% 100%;" habe ich von Hintergrund an DIV anpassen ... & Hilfe.

 

[threadi]

Deine HP existiert nicht?

 

[Cheffchen]

Hallo,

also nur das M ist richtig verlinkt :O)

Auf der seite sehe ich nichts mit background-size.
hast eigentlich alle 3 sachen angegeben wie in dein gezeigtem link für FF und Safari?

Scriptly kenn ich nicht, is glaube ich auch ein etwas kleinerer unbekannter.
background-size ist css3 deswegen wird der das noch nicht kennen.

Cheffchen

 

[MichiLetsPlay]

Auf der seite sehe ich nichts mit background-size.
hast eigentlich alle 3 sachen angegeben wie in dein gezeigtem link für FF und Safari?

Daran lags danke!

Aber irgendwie funktioniert der Teil

#hauptteil {
[COLOR=#000000][FONT=monospace]    background-image:url(bild.jpg);[/FONT][/COLOR]
[COLOR=#000000][FONT=monospace]    background-repeat:repeat-y;[/FONT][/COLOR]
[COLOR=#000000][FONT=monospace]    background-position:center;[/FONT][/COLOR]
[COLOR=#000000][FONT=monospace]    height:70px;[/FONT][/COLOR]
[COLOR=#000000][FONT=monospace]    width:80%;
[/FONT][/COLOR][COLOR=#000000][FONT=monospace]    -moz-background-size:100%; 970px /* Firefox */[/FONT][/COLOR]
[COLOR=#000000][FONT=monospace]    -webkit-background-size:100%; 970px /* Safari, Chrome */
[/FONT][/COLOR][COLOR=#000000][FONT=monospace]    background-size:100%; 970px /* Opera, IE, W3C Standard */
[/FONT][/COLOR][COLOR=#000000][FONT=monospace]    padding-left: 20px;
[/FONT][/COLOR]}

(52 - 62)
nicht so ganz.
Kann jemand "eine Alternative bieten"?

Grüße

 

[Cheffchen]

Hallo,

kann nicht, die 970px verhauen die eigenschaft und damit wird diese nicht ausgeführt :O)

[COLOR=#000000][FONT=monospace]-moz-background-size:100%; [B]970px[/B] /* Firefox */[/FONT][/COLOR] [COLOR=#000000][FONT=monospace]    
-webkit-background-size:100%;[B] 970px[/B] /* Safari, Chrome */ [/FONT][/COLOR][COLOR=#000000][FONT=monospace]    
background-size:100%; [B]970px[/B] /* Opera, IE, W3C Standard */[/FONT][/COLOR]

Cheffchen

 

[MichiLetsPlay]

Ok und gbt es da in irgendeiner Form eine Alternative?

 

[Cheffchen]

HAllo,

ja in dem das valide machst nach ; musst die zahl weg da die dort nichts zu suchen hat.
so:

-moz-background-size:100%; /* Firefox */ -webkit-background-size:100%; /* Safari, Chrome */ background-size:100%; /* Opera, IE, W3C Standard */

Cheffchen

 

[MichiLetsPlay]

Ich weiß ja nicht wieso, aber die ("identischen") Codes werden unterschiedlich ausgegeben?

#hauptteil {        background-image:url(http://www.woodencraft.co.de/i/bgh.jpg);
        background-repeat:repeat-y;
        background-position:center;
        height:970px;
        width:80%;
        -moz-background-size:100%; /* Firefox */
        -webkit-background-size:100%; /* Safari, Chrome */
        background-size:100%; /* Opera, IE, W3C Standard */
        padding-left: 20px;
    }

#hauptteiltop {
        background-image:url(http://www.woodencraft.co.de/i/bgt.png);
        background-repeat:no-repeat;
        background-position:center;
        height:13px;
        width:80%;
        -moz-background-size:100% 100%; /* Firefox */
        -webkit-background-size:100% 100%; /* Safari, Chrome */
        background-size:100% 100%; /* Opera, IE, W3C Standard */
    }

Weis da jemand von euch bescheid?

 

[Cheffchen]

Hallo,

also identisch würde ich da nicht sagen :O) Find the difference between two text files online - Diff Checker

oben sagt 100% und unten 100% 100%
oder

background-repeat:repeat-y; und background-repeat:no-repeat;
Cheffchen

 

[MichiLetsPlay]

Ok es liegt am padding.
Gibt es eine möglichkeit das ohne padding zu machen?
Es würde zwar mit      funktionieren, das finde ich dann aber unübersichtlich.

 

[Cheffchen]

Hallo,

mach einfach ein div rein mit margin, sonst musst zuviel beachten wegen browser IE, FF usw da Padding nicht immer gleich gerechnet wird.

Cheffchen

 

[MichiLetsPlay]

Öhmm margin scheint sich nicht mit DIV zu vertragen.

 

[Cheffchen]

Schuldige aber da geht nur ????

wie beisen die sich oder reden die nur nicht miteinander? :O)

Cheffchen

 

[MichiLetsPlay]

Ähhhhhhh
Die reden nicht mireinander? ;)

 

[Cheffchen]

Hallo,

ok ich versuche es noch mal

zerst kommt dein div mit dem hintergrund.
bis jetzt war da gleich der inhalt.
das änderst aber das um denn inhalt noch mal ein div machst und dem sagst magin: 0 15px;
dann ist der text 15px vom rand des div´s mit dem hintergrund.

Cheffchen

 

[MichiLetsPlay]

Und ich Satzbau nicht verstehen?

Entschuldigung das sich das "zieht", aber ich komm nicht mit *_*

 

[Cheffchen]

so margin inhalt - jsFiddle

Cheffchen

 

[MichiLetsPlay]

Ok danke!

Jetzt bleibt nurnoch die Frage, wie ich die Schriftgröße an die Bildschirmgröße anpasse?


Grüße