unsymmetrischer Hintergrund im header

[Voselix]

Hallo zusammen,

ich habe im Header ein Hintergrundbild verwendet:

Das Bannerbild ist zweigeteilt-oben dunkelblau unten hellblau--jetzt soll aber der dunkelblaue Streifen erst rechts vom Logo bis zum rechten Seitenrand reichen-links neben dem Logo soll die gesamte Höhe hellblau sein....

Jetzt habe ich einen css Breakpoint, um eine mobile Version einzublenden und eine desktop Version.
Bis 1300er Auflösung kein Problem....bei ner 1600er Auflösung ist natürlich der Linke hellblaue Bereich zu klein-der dunkelblaue Balken steht links über...


Wie würdet Ihr das realisieren?
Hintergrund Hellblau und der dunkelblaue nach rechts versetzte Streifen als formatiertes Modul (css quadrat)??
Wäre für einen sinnvollen Ansatz sehr dankbar!

GLG und Danke vorab!
Vosi

[Andreas]

Versuch mal das hier.

#header {
  background-color: #4070B8;
  background-image: linear-gradient(to right, transparent, transparent 50%, #003366 50%);
  background-repeat: no-repeat;
  background-size: auto 40px;
}
#header .inside {
  background-image: linear-gradient(to bottom, #003366, #003366);
  background-repeat: no-repeat;
  background-size: auto 40px;
} 

[Voselix]

Hallo Andreas,

vielen Dank für den Tipp!

Ich hab mit deinem Codeschnipsel einige Zeit rumexperimentiert und habe es nun folgendermassen gemacht:

#header {
    background-color:#4070B8;
    background-size: auto 46px;
}

#header .inside {
    max-width:75em;
    position:relative;
    margin:0 auto;
    background-position:right top;
    background-repeat:no-repeat;
    background-image: linear-gradient(to left, transparent, #003366 20%);
    background-size: 100% 46px;
}

Ein wenig anders aber Du hast mir eine grosse Hilfestellung gegeben das mit linear-gradient zu lösen!
Danke dafür!
GLG
Vosi

[Andreas]

jetzt soll aber der dunkelblaue Streifen erst rechts vom Logo bis zum rechten Seitenrand reichen-links neben dem Logo soll die gesamte Höhe hellblau sein....

Du bist mal einer - das war doch gerade die Herausforderung, dass der Streifen bis ganz nach rechts geht und jetzt hast du das gar nicht gebraucht?

Hier noch ne kleine Korrektur, weil du einiges davon nicht brauchst.

#header {
  background-color: #4070B8;
}
#header .inside {
  max-width: 75em;
  position: relative;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-image: linear-gradient(to right, #003366 80%, transparent);
  background-size: 100% 46px;
} 

[Voselix]

vielen Dank Andreas

GLG
Vosi