[GELÖST] CSS Hilfe grösse background

Henk1060 · 28. März 2012 16:32

So irgendwie bringe ich das nicht mehr auf die reihe.
Versuche gerade die Sprites passend einzubauen... aber ohne grossen erfolg.

Bild 1

Hier klicken, um den Code zum Kopieren zu markieren

#content-holder_png { 
   
height               : 344px; 
width                : 8px; 
background-position  : -319px -0px;   
background-repeat: repeat-y ;


 }

Bild 2 ist schon besser, jedoch passt es dann mit der grafik nicht wo bei bild 1 nur der grüne Balcken dargestellt wird, sind andere teile des Sprites bild dargestellt...

Hier klicken, um den Code zum Kopieren zu markieren

#content-holder_png { 
background-position  : -319px -0px;
background-size: 344px 8px; 
}

Wo mache ich den fehler?

NaN · 28. März 2012 17:32

background-position : -319px -0px;

Das sieht komisch aus.

Wo ist denn Dein anderer Beitrag abgeblieben?
Hattest Du nicht noch einen, wo man Auszüge aus dem Template sieht?
Mir war so, als hättest Du das Hintergrundbild einer Klasse zugewiesen.
Kann es sein, dass es da mehrere Elemente gibt, die sich evtl. überschneiden?

Cherry · 28. März 2012 17:54

kann es sein, daß man sprites nur einsetzen kann, wenn's keine repeats gibt? Meine mal sowas gelesen zu haben.

Henk1060 · 28. März 2012 19:04

hm... das habe ich mir auch schon gedacht .... aber ich glaube das eher nicht...

das hat mit der generator ausgespuckt;

Hier klicken, um den Code zum Kopieren zu markieren

html
<div class="sprites" id="box-holder_png"></div> 
<div class="sprites" id="content-holder_png"></div> 
<div class="sprites" id="footer_png"></div> 
<div class="sprites" id="h1-separator_png"></div> 
<div class="sprites" id="header_bg_png"></div>


CSS
 .sprites { 
    background-image     : url(/your/image/url.png); 
    background-color     : transparent; 
    background-repeat    : no-repeat; 
 } 
 #box-holder_png { 
    height               : 105px; 
    width                : 319px; 
    background-position  : -0px -0px; 
 } 
 #content-holder_png { 
    height               : 344px; 
    width                : 8px; 
    background-position  : -319px -0px; 
 } 
 #footer_png { 
    height               : 341px; 
    width                : 13px; 
    background-position  : -327px -0px; 
 } 
 #h1-separator_png { 
    height               : 9px; 
    width                : 242px; 
    background-position  : -340px -0px; 
 } 
 
 #header_bg_png { 
    height               : 128px; 
    width                : 2px; 
    background-position  : -582px -0px; 
 }

oder ist da so falsch?
die DIVs sollten sich nicht überschneiden. da diese DIV zuvor schon als hintergrund als erstes div angelgt ist.

mike-r · 28. März 2012 19:47

Zu wenig Information.
Wie soll es denn am Ende aussehen? Wie sieht Deine Grafik aus?

Kleine Anregung zum Konzept: repeat wiederholt das ganze Bild, nicht nur Deinen imaginären "Ausschnitt".

Edit: Dufte wäre ein Testcase incl. Deiner Grafiken, wenn ich mir Deinen Code so im Kopf render, sehe ich kein Sprite, bzw. keine Veranlassung, das so zu realisieren, wie Du es tust.

Beitrag geändert von mike-r (28. März 2012 19:50)

Henk1060 · 29. März 2012 06:27

mike-r schrieb:

Kleine Anregung zum Konzept: repeat wiederholt das ganze Bild, nicht nur Deinen imaginären "Ausschnitt".

Ist es denn eigntlich möglich ein Sprite zu wiederholen?

mike-r · 29. März 2012 12:58

Sicher ist das möglich, das kannst Du ja in Deiner letzten Grafik sehen, dazu müsstest Du aber ein riesiges Bild erstellen, wo die Abstände zwischen den Einzelgrafiken mindestens so gross sind, wie die Container, wo Du die verwenden willst. (und natürlich musst Du Dich auf eine Richtung festlegen).
Darunter leidet allerdings wieder die Ladezeit. Hinzu kommt, dass das Unmengen RAM und CPU frisst.

Henk1060 · 29. März 2012 15:55

ja das dachte ich mir schon....
tja ist meine erstes Sprite.... und jetzt bin ich schlauer das ich es nur ohne repeats nutzten kann.

Bin gerade dabei es für Mouseover zwecke zu verwenden klappt super wink )

Danke für eure Hilfe....

Forum für CMS/made simple

#1 28. März 2012 16:32

[GELÖST] CSS Hilfe grösse background

#2 28. März 2012 17:32

Re: [GELÖST] CSS Hilfe grösse background

#3 28. März 2012 17:54

Re: [GELÖST] CSS Hilfe grösse background

#4 28. März 2012 19:04

Re: [GELÖST] CSS Hilfe grösse background

#5 28. März 2012 19:47

Re: [GELÖST] CSS Hilfe grösse background

#6 29. März 2012 06:27

Re: [GELÖST] CSS Hilfe grösse background

#7 29. März 2012 12:58

Re: [GELÖST] CSS Hilfe grösse background

#8 29. März 2012 15:55

Re: [GELÖST] CSS Hilfe grösse background

Fußzeile des Forums