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.

Try clearing the cache on your website using the F5, and see if that helps. If not, maybe try adding a runnable code snippet of the website for us, as to debug it. — Maxwell
– Maxwell, Commented Jan 1, 2017 at 7:56

Santosh Kumar · Accepted Answer · 2017-01-01 15:32:56Z

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/

user7234396 · Accepted Answer · 2017-01-01 16:24:21Z

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 additonalhttp request

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

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

Collectives™ on Stack Overflow

CSS gradient not applied correctly in html5 website

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related