I have multiple backgrounds on my body element.
body { background:linear-gradient(to bottom, rgba(255,255,255,0) 10%, rgba(182,176,157, .5) 100%),url("images/flower-bg.jpg") repeat #eae7de }
It shows up fine in the latest versions of IE, FF, and Chrome. However, neither of the two backgrounds show up in Safari.
Here is the site.
Can someone help me point out where I went wrong?
Edit: Tried this but it didn't work.
body {
background:-webkit-linear-gradient(to bottom, rgba(255,255,255,0) 10%, rgba(182,176,157, .5) 100%),url("images/flower-bg.jpg") repeat #eae7de;
background:linear-gradient(to bottom, rgba(255,255,255,0) 10%, rgba(182,176,157, .5) 100%),url("images/flower-bg.jpg") repeat #eae7de;
}
Edit 2: Tried this but it also didn't work. Neither background shows for any browser now.
body {
background-image: linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de;
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de;
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de;
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de;
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de;
}
Edit 3: This is what the rest of my body code looks like.
body {
background-image: linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de;
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de;
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de;
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de;
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de;
color:#544a46;
font:62.5%/1.6 Helvetica, Arial, Sans-serif
}
You need to use background-image: instead
Try this code:
background-image: url('yourimage.jpg'); /*fallback*/
background-image: url('yourimage.jpg'), linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%);
background-image: url('yourimage.jpg'), -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%);
background-image: url('yourimage.jpg'), -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%);
background-image: url('yourimage.jpg'), -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%);
background-image: url('yourimage.jpg'), -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%);
Related
I'd like to have a linear gradient for my entire website using HTML/CSS - starting from one color (say red) at the beginning to another (say blue) at the end. When users request the page, they first see a blue background turning gradually to a red background as they scroll down. The website should be separated by sections, each of them filling the entire screen.
The problem is that when I separate the website with sections using 100vh, the linear gradient repeats itself for each section - instead of linearly changing over the sections.
Here is the code I have used so far:
* {
margin: 0;
padding: 0;
}
body {
background-image: -ms-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -moz-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -o-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #202020));
background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: linear-gradient(to top, #ffffff 0%, #202020 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
section {
height: 100vh;
}
<section>
<div class="">first section</div>
</section>
<section>
<div class="">second section</div>
</section>
Any ideas on how to extend the linear gradient background over the sections?
Any help is appreciated!
This probably isn't exactly what you are after, but you might be able to achieve what you want by adjusting the gradient percentages. I have added different gradients to each section and set the background-attachment to static.
If you are after a different effect you may have to use Javascipt/jQuery.
* {
margin: 0;
padding: 0;
}
body > section:nth-child(1) {
background-image: -ms-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -moz-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -o-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #202020));
background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: linear-gradient(to top, #ffffff 0%, #202020 100%);
}
body > section:nth-child(2) {
background-image: -ms-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: -moz-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: -o-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #202020), color-stop(1, #ffffff));
background-image: -webkit-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: linear-gradient(to top, #39a7cc 30%, #ffffff 100%);
}
section {
height: 100vh;
background-repeat: no-repeat;
background-attachment: static;
}
<section>
<div class="">first section</div>
</section>
<section>
<div class="">second section</div>
</section>
I used GeckoWebrowser control in my VB.Net desktop application by following this link .
It is working fine, but the problem is about proper rendering of CSS and HTML. When I navigate browser to local installed IIS application like:
GeckoWebbrowser1.Navigate("Localhost:8081").
The website renders completely and works fine, BUT the same website is not rendering properly when I called it from domain:
GeckoWebbrowser1.Navigate("124.25.54.50:8545").
Please help me how to resolve the problem. I tried every where but failed.
Below is my Code:
.grdarea1
{
float: none;
/*height: 30px;*/
font-size: 16px;
line-height: 0px;
margin: 0 0 0 10px;
padding: 2px 0;
text-transform: uppercase;
text-align :left ;
border-radius: 5px;
-webkit-border-radius: 5px;
border: #0e2a3f solid 1px;
color: #FFFFFF;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,0.3);
background: #4d73a0;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNzNhMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMlIiBzdG9wLWNvbG9yPSIjMzY2MzljIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiMzNDYxOWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMzMDYwYTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiMyYzVjOWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiMyZDU4OGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0NyUiIHN0b3AtY29sb3I9IiMyODRmODYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NyUiIHN0b3AtY29sb3I9IiMyMzQ1NzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiMxYjNhNjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MyUiIHN0b3AtY29sb3I9IiMxZDNjNmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5NyUiIHN0b3AtY29sb3I9IiMxYzM5NTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWQzYTVhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, #4d73a0 0%, #36639c 3%, #34619a 7%, #3060a0 10%, #2c5c9a 20%, #2d588b 30%, #284f86 47%, #234573 67%, #1b3a68 90%, #1d3c6a 93%, #1c3959 97%, #1d3a5a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d73a0), color-stop(3%, #36639c), color-stop(7%, #34619a), color-stop(10%, #3060a0), color-stop(20%, #2c5c9a), color-stop(30%, #2d588b), color-stop(47%, #284f86), color-stop(67%, #234573), color-stop(90%, #1b3a68), color-stop(93%, #1d3c6a), color-stop(97%, #1c3959), color-stop(100%, #1d3a5a));
background: -webkit-linear-gradient(top, #4d73a0 0%, #36639c 3%, #34619a 7%, #3060a0 10%, #2c5c9a 20%, #2d588b 30%, #284f86 47%, #234573 67%, #1b3a68 90%, #1d3c6a 93%, #1c3959 97%, #1d3a5a 100%);
background: -o-linear-gradient(top, #4d73a0 0%, #36639c 3%, #34619a 7%, #3060a0 10%, #2c5c9a 20%, #2d588b 30%, #284f86 47%, #234573 67%, #1b3a68 90%, #1d3c6a 93%, #1c3959 97%, #1d3a5a 100%);
background: -ms-linear-gradient(top, #4d73a0 0%, #36639c 3%, #34619a 7%, #3060a0 10%, #2c5c9a 20%, #2d588b 30%, #284f86 47%, #234573 67%, #1b3a68 90%, #1d3c6a 93%, #1c3959 97%, #1d3a5a 100%);
background: linear-gradient(to bottom, #4d73a0 0%, #36639c 3%, #34619a 7%, #3060a0 10%, #2c5c9a 20%, #2d588b 30%, #284f86 47%, #234573 67%, #1b3a68 90%, #1d3c6a 93%, #1c3959 97%, #1d3a5a 100%);
}
The code below creates diagonal lines by using CSS gradient. But how can I make the coloured line thinner about 2px, and the white space in-between larger about 7px?
body {
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.25, #fff), color-stop(0.25, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.75, #fff), color-stop(0.75, #9CC));
background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CCb 50%, #fff 50%, #fff 75%, #9CC 75%);
background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9cc 75%);
background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 25%, #bbb 25%, #bbb 50%, #fff 50%, #fff 75%, #bbb 75%);
background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9CC',GradientType=0 ); / IE6-8 */
background-image: linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
background-size: 5px 5px;
width:100%;
height:100%;
}
You have to do it by changing the percents of the gradient to smaller or larger values, #fff = white so the range should be larger. #9CC is the blue color, its range should be smaller.
body {
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.35, #fff), color-stop(0.35, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.85, #fff), color-stop(0.85, #9CC));
background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CCb 50%, #fff 50%, #fff 85%, #9CC 85%);
background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9cc 85%);
background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 35%, #bbb 35%, #bbb 50%, #fff 50%, #fff 85%, #bbb 85%);
background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9CC 85%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#9CC', GradientType=0);
/ IE6-8 */ background-image: linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9CC 85%);
background-size: 5px 5px;
width:100%;
height:100%;
}
Demo
I changed the 25% to 35% and 75% to 80% correspondingly which lessened the range and therefore width of the blue lines and increased the range and therefore the width of the white lines
To change them yourself you may want to use a find and replace tool
I've Two CSS for HTML BODY Background
I'm using this css as background of my page ; i want to overlap these two and get combined effect?
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
second one is
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
How can i combine these two into one?
Two Issues with Your Code
First, the two images must be called within a single background-image call, otherwise the way the "cascading" part of CSS works the second one will just override the first. So the first thing that needs changing is to make all of the calls grouped like this (each successive call separated by commas):
background-image:
linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%),
linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
This is what the possible duplicate question noted to do, and that is correct, but it probably did not work for you because...
Second, each of those gradient images you have defined are non-transparent, so one of them will "over paint" on top of the other and effectively give you just one image. I think what you really want is a fade effect, which will require you to use alpha opacity to achieve. So every instance of #FFFFFF needs to change to rgba(255, 255, 255, 0), then you get the blending I believe you seek:
background-image:
linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0) 75%, #A3EF69 100%),
linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0) 75%, #A3EF69 100%);
I have an image from a designer, that looks like this:
I'd like to make it 1px height vertically-repeated (as background for scroll-bars grip). Is there a way to emulate the glowing effect in the middle of the image, using CSS3?
Regards,
Create another div on top of it, with the following background:
background-image: linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
Of course, to be of any use, this should be rewritten like this:
background-image: linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
background-image: -moz-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);