• 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
 
Werbung:
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.
 
Werbung:
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>
 
Werbung:
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