CSS gradient not applied correctly in html5 website

Question

I'm using following website ( http://www.colorzilla.com/gradient-editor/ ) to generate a CSS gradient for the background of my website. In my main CSS file, I put the code like below:

body {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f77624+0,f9c655+100 */
    background: #f77624; /* Old browsers */
    background: -moz-linear-gradient(left,  #f77624 0%, #f9c655 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #f77624 0%,#f9c655 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #f77624 0%,#f9c655 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f77624', endColorstr='#f9c655',GradientType=1 ); /* IE6-9 */
}

When I refresh index.html file, I only see the background color without the gradient. Is there any error in the CSS code above? If it is any help, I am also using the HTML5 Boilerplate .

Answer 1

css gradient code will work only at latest browser.. will not work less than IE9, NO issue with above code.. just clear the history of browser ..

 body { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f77624+0,f9c655+100 */ background: #f77624; /* Old browsers */ background: -moz-linear-gradient(left, #f77624 0%, #f9c655 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #f77624 0%,#f9c655 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #f77624 0%,#f9c655 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f77624', endColorstr='#f9c655',GradientType=1 ); /* IE6-9 */ } .wrapper { width: 95vw; height: calc(95vw * 9/16); max-height: 95vh; max-width: calc(95vh * 16/9); background: center; background-size:contain; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #lorem { color: aqua; font-size:10vmin; text-align:center; position:absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; margin:auto; } 

 <div class="wrapper"> <p id="lorem"> This text should scale with div only. </p> </div> 

created sample : https://jsfiddle.net/70fq44sv/5/

Answer 2

This is for reference only.

it's possible to use SVG for gradient backgrounds. it's supported by all modern browsers.

You can view the source of an SVG background to see how it's structured in this live example created by MDN

They scale well and eliminate the need for browser prefixes.

in the example below I created an SVG and then encoded it into base64 to eliminate the additonal http request

 .cooldiv { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAlIiB4Mj0iMTAwJSIgeTE9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agc3R5bGU9InN0b3AtY29sb3I6IHJnYigyMjEsMTUwLDg2KTsiIG9mZnNldD0iMCIvPjxzdG9wIHN0eWxlPSJzdG9wLWNvbG9yOiByZ2IoNTIsMTI3LDE0OSk7IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHN0eWxlPSJmaWxsOiB1cmwoI2cpOyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==); width: 100vw; height: 100vh; } 

 <div class="cooldiv"></div>