I'm using a CSS code like the following one for creating a radial gradient background:
body
{
background-color: #0176A0;
background-image: -moz-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image: -webkit-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image: -o-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image: -ms-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image: radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#029CC9', endColorstr = '#005077', GradientType = 0);
}
but the result is not the intended one! My aim is having a radial gradient background which covers the entire viewport. I can use the background-size property which is a part of CSS3 specification to get a better result, but unfortunately this property does not work in IE?
Does anyone have an idea please?
Add this to your CSS:
html {
height: 100%
}
Even better:
html {
min-height: 100%;
}
This will make the gradient extend to your content height otherwise it will be limited to just the window height.
Related
I'd like to insert a picture to separate the 'limits' of the progress bar.
Hence the right side would be red, than I'd have my little picture, followed by a green side
Is it possible?
Client side it is all just html, css and javascript. A css linear gradient already works great (boundaries at 10 and 90 percent)
.ui-progressbar {
background: -moz-linear-gradient(left, rgba(0,255,0,1) 0%, rgba(0,255,0,0) 10%, rgba(255,0,0,0) 90%, rgba(255,0,0,1) 100%);
background: -webkit-linear-gradient(left, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
background: linear-gradient(to right, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ff0000',GradientType=1 );
}
And if you want to combine it with an image, see
How do I combine a background-image and CSS3 gradient on the same element?
I want to make a decent but professional looking attractive body background for my website.
It should look like Twitter's background:
Can you see the blue shaded background? That's exactly what I want to make.
I don't have a good experience in web development and I'm pretty new to it. Please help me to create this background.
You can use this generator here
Example markup using those colors:
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(center, circle farthest-corner, #A3CEF2 0%, #5D95CC 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, circle farthest-corner, #A3CEF2 0%, #5D95CC 100%);
/* Opera */
background-image: -o-radial-gradient(center, circle farthest-corner, #A3CEF2 0%, #5D95CC 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #A3CEF2), color-stop(1, #5D95CC));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, circle farthest-corner, #A3CEF2 0%, #5D95CC 100%);
/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at center, #A3CEF2 0%, #5D95CC 100%);
The css they use are as follows:
.mobile-callout {
background: radial-gradient(circle, #94D2F8, #3A92C8) repeat scroll 0% 0% transparent;
}
.front-page {
background-color: #292929;
}
So I guess the code you are looking for is:
'...': radial-gradient(circle, #94D2F8, #3A92C8) repeat scroll 0% 0% transparent;
I'm looking at the heroku website: https://www.heroku.com/
I was curious how they have achieved the ability to have a full page gradient on the home page with content under it, and then on the next page, seemingly with very similar markup, they have been able to keep the exact same section of gradient but applied only to the navigation bar at the top.
How might I get that kind of technique?
Apply the gradient to the body, and then having a transparent div on the front page?
Apply the gradient to a full height div, then have a transparent header div on top of it with a white coloured body.
Demo Header gradient as heroku
Demo Background gradient as heroku
Demo Background gradient in general with all cross browser styles and support
html {
background: #1e5799;
/* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(61%, #207cca), color-stop(100%, #7db9e8));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
/* IE6-9 */
min-height: 100%;
}
You can use your inspect tool to see their css:
background-image:
-webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),
-webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);
This is just a bit complicated, but not too much:
1) You can have multiple backgrounds, which is often useful as a fallback or for more complex gradients
2) You can set the origin and "destination" of a gradient using percentages or just names like "top right" "bottom" and such, thus avoing having to give an angle - so it's always the same thing, independent of the aspect ratio.
Worth noting is, that they specifically only support webkit (Chrome, Safari), even though I'm pretty sure this could easily be done on any modern browser.
Hope this clears it up a bit.
Read about "parallax" technology on the web
I'm using a gradient as a background. I was hoping that the gradient would start out darker and gradually lighten as it gets to the other end of the container that it is applied to. Instead, what I notice is that the darker part covers around 90% and only after this 90% does it start to get lighter. It would be nice if around 50% it was halfway between the start and end color. Is there any way of achieving this? Here is my css:
background: -moz-linear-gradient(center bottom , #f4f7fa 0pt, #FFFFFF 100%) repeat scroll 0 0 transparent;
background: linear-gradient(bottom, #f4f7fa 0, white 100%);
background: -webkit-linear-gradient(bottom, #d6d6d6 0, white 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f7fa', endColorstr='#FFFFFF', GradientType=0);
Try using this code
background: linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -o-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -moz-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -webkit-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -ms-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
Gradient property explanation:
linear-gradient(Gradient Starting Position,Color & Offset,Color & Offset);
So in your code the color #D6D6D6 started form 0% and moves upwards,
then color #FFFFFF stated form 100% as offset is set as 100%(and it ends there too).
So to get the consistent flow from one color to other you should set the offset of second color to 50%.
Check this link to better understand CSS Gradient property.
Regards
Shiva
I am having the most difficult time getting textured background images to show up correctly in HTML5 tags. Specifically, I'm trying to add a .png texture of low-opacity watercolor daubs to a tag that already has a cross-browser gradient applied to it. I can get the gradient to show up fine, but can't get the background image to show up correctly.
I've been told that the CSS command for it is shorthanded:
background:url("filepath");
Is it a matter of the type of quotes I'm using? Does it matter if it's single / double quotes? Or no quotes at all? i'm not sure what the quotes are doing to the selector, or if it's a matter of you can't apply a background image AND a gradient? You can view the space I'm trying to modify at http://www.zeldezine.info/demo/ in the obvious footer position.
Thanks!
You can't add a background image and a gradient to the same element. As for quotes it doesn't matter whether they are single, double or none at all. Just make sure the image path is correct.
If you want both, you can do something like this:
http://jsfiddle.net/vjEh7/
CSS:
footer {
background: rgb(169,3,41);
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}
div {
width: 150px;
height: 160px;
background: url(http://www.zeldezine.info/demo/img/logo_bottom.png) no-repeat;
}
HTML:
<footer>
<div></div>
</footer>
Try this:
body
{
background-image:url('images/image.jpg');
background-repeat:repeat;
}