Reputation: 163
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?
Upvotes: 1
Views: 147
Reputation: 3389
<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>
Upvotes: 0
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
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