CODEWITHSUNDEEP
htmlcssgradient
Ctech45
Ctech45

Reputation: 496

Create Gradient Background in HTML

I am new to html, and currently have set a background that is a single color. I have the code to change the background to the gradient color I want, but I cannot get it to work. The part of my code for creating the singular color background is:

</head>
<body>    
<!--Start of Product Banner-->
<body style="background-color:#6e6e6e;">
<div class="row">
<div id="header_region">
<!--Start of Header Logo-->
<div id="logo" class="two_thirds">
.....

The gradient color and code I would like to change it to is:

background: linear-gradient(to bottom,#6e6e6e 0%,#313131100%);

I have tried playing with this code to get it to work, but can seem to get the right syntax. How do I go about implementing this gradient?

Upvotes: 0

Views: 159

Answers (3)

Guillermo Guti&#233;rrez
Guillermo Guti&#233;rrez

Reputation: 17789

A simple linear gradient, from top to bottom (#6e6e6e to #313131), for the body tag:

body {
  background: -webkit-linear-gradient(#6e6e6e, #313131); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#6e6e6e, #313131); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#6e6e6e, #313131); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#6e6e6e, #313131); /* Standard syntax */
}

You can find more information and examples about gradients in CSS3 here.

Upvotes: 0

Miktown
Miktown

Reputation: 99

You have two <body> tags and the child has inline CSS who is overriding the css style, please fix it and apply the css to the body.

body{
/* your code */
}

Upvotes: 2

bilcker
bilcker

Reputation: 1120

Go to this link http://www.colorzilla.com/gradient-editor/ You can add colours like you would in Photoshop and it will create a gradient code for you as well as gracefully degrades when moving to older versions of browsers.

Upvotes: -1

Related Questions