Css3 Gradient Background

How do I combine a background-image and CSS3 gradient on the same element?

Multiple backgrounds!

body {  background: #eb01a5;  background-image: url("IMAGE_URL"); /* fallback */  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */}

css gradient background with color behind it

Depending on which browsers you are supporting (see support in the Mozilla Documentation), you can do this with a linear-gradient as part of the background, e.g.

.awesome_button {  width: 100px;  height: 30px;    background: #444499 linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 100%);
  border-radius: 5px;  color: #ffffff;}

<button class="awesome_button">  Test Button</button>

CSS3 gradient background

DEMO to support all capable browsers

body {
  background-color: #ffffff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#999999));
  background-image: -webkit-linear-gradient(top, #ffffff, #999999);
  background-image:    -moz-linear-gradient(top, #ffffff, #999999);
  background-image:      -o-linear-gradient(top, #ffffff, #999999);
  background-image:         linear-gradient(to bottom, #ffffff, #999999);
}

CSS3 Please might be useful

Making gradient background fill page with css

To have the gradient fill the viewport, give the <html> element a height of 100%: fiddle

html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

To prevent the gradient from repeating past the visible section of the viewport (assuming there was a scrollbar), replace height: 100%; with min-height: 100%;.

html {    height: 100%;    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;    background: #70bg32;    background-repeat:no-repeat;    background: -webkit-linear-gradient( to left top, blue, red);    background: -moz-linear-gradient( to left top, blue, red);    background: -ms-linear-gradient( to left top, blue, red);    background: -o-linear-gradient( to left top, blue, red);    background: linear-gradient( to left top, blue, red);}

Curved linear-gradient background?

is it this you want to do

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>
<style>
  div {
    background-image: radial-gradient(
      ellipse farthest-side at 92% 378%,
      #9fa4a9 21%,
      #7b7b7b 100%,
      #3e3f40 35%
    );
    width: 421px;
    height: 150px;
  }
</style>
</head>
<style></style>
<body>
<div></div>
</body>
</html>

Sample Image

css gradient background for text

You can use linear-gradient(to right, black 60%, white 60%)

div {  color: red;  font-size: 25px;  padding: 20px;  width: 300px;  border: 1px solid black;  background: linear-gradient(to right, black 60%, white 60%);}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, at.</div>

Repeated CSS gradient background on body as I add new HTML elements

Background for body is set just for its content height (shorter than viewport). Add min-height: 100vh to body.

body {min-height: 100vh}