TSO: Gradient an Bereich anpassen

Beitrag lesen

Abend,

So jetzt das Problem: Ich hab keine Maße. Wie kann ich das so angeben dass der Farbwechsel da passiert wo der Border ist?

Du hast doch Maße: Du sagst, dass dein Body eine max-width von 1000px hat. Schmaler wird der Body als block-Element dementsprechend nur, wenn der Viewport kleiner als 1000px ist. Somit darf dein Gradient von der Mitte aus gesehen frühestens nach 500px beginnen.

Das erreichst du unter anderem so:

  
body { margin:0px auto; max-width:1000px; border:1px solid black;  
    background-image: linear-gradient(270deg, yellow, yellow 500px, white),  
                      linear-gradient( 90deg, yellow, yellow 500px, white);  
    background-size: 50%,50%;  
    background-position: left,right;  
    background-repeat: repeat-y;  
}  

Gibt vermutlich noch elegantere Lösungen, aber die kam mir jetzt so in den Sinn.