Robert Miller
Robert Miller

Reputation: 163

Background with more than 1 color

I'm trying to add a background that is split in 3 parts. 5% gray on the left, white, 5% gray on the right...

SO I created a gradient with CSS, which is partially okay in Chrome but in IE it doesn't work at all...

How would you create the effect I'm looking for?

Here is the website.

Upvotes: 1

Views: 147

Answers (3)

Barnee
Barnee

Reputation: 3389

Css gradient:

<div class="container"></div>

css is too long so look in this fiddle.
This one works in IE 9.


Another option:

<div class="container">
    <div class="white"></div>
</div>

<style>
body {  background: blue;}
.container {
    height: 50px;
    background: gray;
}
.white {
    height: 50px;
    background: white;
    margin: 0 5%;
}
</style>

Fiddle

Upvotes: 0

Tashen Jazbi
Tashen Jazbi

Reputation: 1068

this website will help you to create css gradient http://gradients.glrzad.com/ also try to run this in IE there is support for the gradient in latest IE but i think not for old ones. other solution is that make a photoshoped image of your own design and use this as your background image.

Upvotes: 0

Nomad101
Nomad101

Reputation: 1698

CSS Gradients can cause havoc due to their lack luster support accross platforms. You would most likely want to do the div method mentiond by @Louis in the comments to your question. Something like this could work:

 <body>
 <div class="left"></div>
 <div class="center"></div>
 <div class="right"></div>
 <style>
 .left, .right{
     width:5%;
     background:gray;
     height:100%;
     float:left;
     margin:0;
 }
 .center{
     width:90%;
     background:white;
     height:100%;
     float:left;
     margin:0;
 }
 </style>
 </body>

Upvotes: 1

Related Questions