Here is my attempt
.string{
background: #b38f72; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzOGY3MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2QwYjI3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2QzYjg4OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzhlNjU0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzQwMjExNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZjI4MjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-repeating-linear-gradient(-45deg, #b38f72 0%, #d0b27e 0.5%, #d3b888 1%, #8e6547 1.5%, #402116 2%, #3f2824 2.5%); /* FF3.6+ */
background: -webkit-repeating-gradient(linear, left top, right top, color-stop(0%,#b38f72), color-stop(20%,#d0b27e), color-stop(40%,#d3b888), color-stop(60%,#8e6547), color-stop(80%,#402116), color-stop(100%,#3f2824)); /* Chrome,Safari4+ */
background: -webkit-repeating-linear-gradient(left, #b38f72 0%,#d0b27e 20%,#d3b888 40%,#8e6547 60%,#402116 80%,#3f2824 100%); /* Chrome10+,Safari5.1+ */
background: -o-repeating-linear-gradient(left, #b38f72 0%,#d0b27e 20%,#d3b888 40%,#8e6547 60%,#402116 80%,#3f2824 100%); /* Opera 11.10+ */
background: -ms-repeating-linear-gradient(left, #b38f72 0%,#d0b27e 20%,#d3b888 40%,#8e6547 60%,#402116 80%,#3f2824 100%); /* IE10+ */
background: repeating-linear-gradient(to right, #b38f72 0%,#d0b27e 20%,#d3b888 40%,#8e6547 60%,#402116 80%,#3f2824 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b38f72', endColorstr='#3f2824',GradientType=1 ); /* IE6-8 */
height:6px;
width:100%;
margin-top:20px
}
http://jsfiddle.net/HmPkJ/
This is the kind of effect that I'm after.
https://forrst-live.s3.amazonaws.com/posts/snaps/94811/mega.jpg?1310500628
Any help would be appreciated...
You just need 2 gradients, one repeating in horizontal, and another one with semitransparent parts in vertical
.test {
position: absolute;
height: 40px;
width: 100%;
background-image:
linear-gradient(0deg, black 0%, rgba(100, 100, 100, 0.2) 10% , white 50% , rgba(100, 100, 100, 0.2) 90% , gray 100% ),
repeating-linear-gradient(to right, black 0px, white 15px)
;
}
fiddle
Why not just use an 5x5 image and just repeat the pattern ?
Use
background-image: url('data:image/gif;base64,R0lGODdhAgAIAOMQAB0aFSUfDyooKTUxJkA6Gk9EJFlPLFRRSGtnZnNpUHRvXIF3bY+Ifp6Xh7Gunby4rywAAAAAAgAIAAAEDHAERV5xpiW20BFABAA7');
height: 8px;
Demo
Related
Here's what I'm trying to do: http://jsfiddle.net/wLyqvrn1/1/
table {
height: 200px;
width: 200px;
background-color: #444557; /* this doesn't show below the gradient */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,ffffff+100&0.1+0,0.1+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(255,255,255,0.1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#1affffff',GradientType=0 ); /* IE6-9 */
}
Even though there is an answer to and older question about this, maybe it is better to add some more thorough explanation.
background-color is one of the properties inside background
When you set
background: linear-gradient(...);
even thought it looks like you are not changing background-color, you are doing so !
background expands to all of its properties, and then resets them (also because it is defined later than background-color)
What I want to achieve is something like this
What I tried so far is the CSS3 multiple background, it worked when I used one corner
See it here: CSS code
But it didn't work when I added more 'backgrounds'
See example here: jsfiddle
code is too long to post it here, view it on jsfiddle
Is there any suggestion to improve this, or is there a better way to doit?
Thank you
Update: Answer
Here is the background (gradient) I used. Link
And here is how I used the code:
HTML
<section class="window">
<div class="win1con">
</div>
</section>
CSS
.window {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.win1con {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0%;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 55%, rgba(0,0,0,0.05) 58%, rgba(0,0,0,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(55%,rgba(0,0,0,0)), color-stop(58%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.8))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
top: 0%;
background: url('../images/vntg.jpg');
}
You can use box-shadow:
background:url('http://i.imgur.com/7TX9BQU.jpg?1?9512');
box-shadow: inset 0px 0px 200px 10px #000;
The key to make this work is the 'inset' value. Tt makes the shadow appear on the inside of the element.
Fiddle: http://jsfiddle.net/KhLsQ/5/
info about box-shadow: http://www.css3.info/preview/box-shadow/
Hi friends is there any possible to get a double color background like this as 100% width and height like this
Here is the sample image:
Sample Image http://www.mediaserveit.com/demo/vivek/resources/question.png
(sample)white in left hand side rest of them are other color.
if i did with div's means
.left{
float:left;
width:30%;
background-color:#fff;
}
.right{
float:right;
width:70%;
background-color:#B97A57;
}
which made height problem.it increases depends upon the contents on the div's.if i use min-height means it also changed on different screens.if there any hack to set like this background in html body!because i need it in full screen
Use a gradient as background.
body{
background: #fcfcfc; /* Old browsers */
background: -moz-linear-gradient(left, #fcfcfc 30%, #6b1717 30%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(30%,#fcfcfc), color-stop(30%,#6b1717)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #fcfcfc 30%,#6b1717 30%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #fcfcfc 30%,#6b1717 30%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #fcfcfc 30%,#6b1717 30%); /* IE10+ */
background: linear-gradient(to right, #fcfcfc 30%,#6b1717 30%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#6b1717',GradientType=1 ); /* IE6-9 */
}
Gradient generated using: http://www.colorzilla.com/gradient-editor/
Demo: http://jsfiddle.net/guE5L/
I am having a problem where for some reason in IE the background at the bottom of my page the background isn't expanding. This seeems to work fine in Firefox but not IE. As you can see in the images below.
CSS:
#SecondaryContent
{
background: url(../images/background_slice.png) repeat-y 0% 0%;
width: 18%;
overflow: hidden;
float: left;
}
#Container
{
overflow:hidden;
min-height:100%;
height:auto!IMPORTANT;
height:100%; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' Doesn't seem to work!
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZmRmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE4JSIgc3RvcC1jb2xvcj0iI2IzZTllZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE4JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); */
background: -moz-linear-gradient(left, #edfdff 0%, #b3e9ef 18%, #ffffff 18%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#edfdff), color-stop(18%,#b3e9ef), color-stop(18%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* IE10+ */
background: linear-gradient(left, #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edfdff', endColorstr='#ffffff',GradientType=1 );*/ /* IE6-8 */
}
I have resolved this myself by using this Javascript to adjust the height of the div to fit around the main div.
<script type="text/javascript">
var theHeight = $("#PrimaryContent").height() + 100;
$('#SecondaryContent').height(theHeight);
</script>
I tried using the "ultimate CSS gradient generator" and it produced the following:
background: #657575; /* Old browsers */
background: -moz-linear-gradient(left, #657575 0%, #758585 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#657575), color-stop(100%,#758585)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #657575 0%,#758585 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #657575 0%,#758585 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #657575 0%,#758585 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#657575', endColorstr='#758585',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, #657575 0%,#758585 100%); /* W3C */
But is seems that the gradient does not work at least with my version of IE9. So is there any way I can produce a simple horizontal gradient with IE9?
Does IE9 support CSS linear gradients?
background:#fff;
background-image: -moz-linear-gradient(top, #fff, #000);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #000));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/
height: 1%;/*For IE7*/
Here is a site that might help you regarding CSS gradients:
http://www.htmlcenter.com/blog/cross-browser-gradient-backgrounds/
In my option, for fixed height elements I usually use a 1px image and repeat that image across the width of the element. That way you know it will look the same in all browsers.
Example:
.element{
height: 30px;
background: url(<1px image location>) repeat-x;
}
There are also websites that will create these gradient images for you. Here is one that is free to use:
http://www.ogim.4u2ges.com/gradient-image-maker.asp