[ERLEDIGT] CSS Menü Background Image

[bodyXY]

Durch das hinzufügen von:

    background-size: 140px;
    background-repeat-y: no-repeat;

unter der Klasse:

.menue.responsive {position: relative;

bekomme ich es hin wie ich es haben möchte. Fühlt sich aber irgendwie falsch an.

https://jsfiddle.net/6cyy2Lx5/2/

EDIT:

ist es auch, da sich bei einer anderen Breite der ganzen Seite weiter verbreitert oder sogar abnimmt wieder.

 

[SpiceLab]

Hab jetzt die ID einzeln zugewiesen, aber das ändert ja nichts an dem Problem.

Davon war auch nicht die Rede, sondern ein grundsätzlicher Hinweis!

Zu dem Problem: in deinen neuen Fiddles sehe ich nicht, dass du was an den Start-/Endpositionen des Gradienten geändert hast.

Schau dir in diesem Punkt das Demo-CSS genauer an. Das Ende ist nicht auf 100, sondern 20% ausgelegt, womit der Gradient so oft wiederholt wird, bis die Elementhöhe zu 100% ausgefüllt ist -> 5 Stück.

 

[bodyXY]

hmm ok, wenn ich die % verändere, dann verschiebt sich doch nur der Raum in dem sich diese eine Farbe befindet? Aber die höhe bleibt gleich?

Bin glaub ich gerade zu doof um es zu checken :/

 

[SpiceLab]

Sorry, mein Denkfehler :( Die Endfarbe soll eben nicht unifarben fortgeführt werden

Wird wohl auf eine feste Höhe hinauslaufen, um die Endposition des Gradienten fixieren zu können.

Beispiel mit 50px statt 100%:

.menue{
   height: 50px;
   overflow: hidden;
   background-color: #1e5799;
   background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 50px);
   background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 50px);
   background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 50px);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
   background-repeat: repeat;
   background-position: top left;
}

Mit dem Zusatz overflow:visible für .menue.responsive, um overflow:hidden aus dem ersten Regelblock zu überschreiben, damit die versteckten Menüpunkte auch erscheinen können:

@media screen and (max-width: 700px) {
  .menue.responsive {
     position: relative;
     overflow: visible;
   }
  ..
}

• Demo: https://jsfiddle.net/SpiceLab/vpt1uarb/

PS: id="secendBG" in class="secondBG" umgewandelt (second = engl. = zweite, das "o" wird wie ein "e" klingend ausgesprochen)

 

[bodyXY]

Danke, auf Hight bin ich ja auch gekommen aber ab da war Sackgasse für mich ^^

So langsam sollte ich dich aufnBier einladen für deine Hilfe ;)

 

[SpiceLab]

So langsam sollte ich dich aufnBier einladen für deine Hilfe ;)

Nur zu

Einem Virtuellen via "Gefällt mir" bin ich aber auch nicht abgeneigt :)

 

[bodyXY]

Wenn du aus dem Raum Düsseldorf kommst, lässt sich das einrichten ^^

 

[SpiceLab]

Wenn du aus dem Raum Düsseldorf kommst, lässt sich das einrichten ^^

Nicht ganz - Luftlinie ~ 250km

Aber so'n Düsseldorfer Alt kann halt voll viel...

Zu unseren frühen Sturm- und Drangzeiten sind wir jetzt glatt spontan losgedüst

Zum "frühen" Kaffee mit anschliessendem Frühschoppen wären wir bei dir auf der Matte gestanden - PROST!