• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS vertical double background

Queckezz

Queckezz

Neues Mitglied
Guten Abend,
Ich versuche seit einiger Zeit einen doppel background wie diesen mit css zu skripten:

Anhang anzeigen 2480

Habe schon so viele Dinge ausprobiert, aber es funktioniert nicht richtig. Ich würde gerne wissen wie man das richtig macht.

Danke für eure antworten, liebe Grüsse
 
Mach ich entweder per Grafik (wenn nur eine Seite den Rahmen bekommen soll) oder mit 2 ineinander liegenden Elementen.
 
Was ist denn ein „doppel background“? Ich hätte ja gesagt: 50 % der Höhe die eine Grafik, 50 % die andere. Aber nach threadis Antwort bin ich unsicher.
 
Wie wäre es mit einem Lösungsansatz in HTML5?

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Foobar</title>
<script type="text/javascript">  
     function draw(){  
          var ctx = document.getElementById('foo').getContext('2d');
          ctx.fillStyle = "rgb(185,167,129)";  
          ctx.fillRect (10, 10, 500, 135);
          ctx.fillStyle = "rgb(205,184,141)";  
          ctx.fillRect (10, 135, 500, 135);                
    }  
</script>
</head>
<body onload="draw();">
    <canvas id="foo" width="500" height="270"></canvas>
</body>
</html>
 
Oder du machst es mit CSS3:
Code: 
div { background-image: -webkit-linear-gradient(top, farbe1 50%, farbe2 50%);
      background-image: -moz-linear-gradient(top, farbe1 50%, farbe2 50%);
      background-image: -ms-linear-gradient(top, farbe1 50%, farbe2 50%);
      background-image: -o-linear-gradient(top, farbe1 50%, farbe2 50%);
      background-image: linear-gradient(top, farbe1 50%, farbe2 50%);
      background-size: 100% 100%; }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben