CODEWITHSUNDEEP
htmlcss
Madan Bhandari
Madan Bhandari

Reputation: 2184

Background with different colors, images and shape

I want background like this. How can I get this with pure CSS.

Background Image

I have searched for this but I didn't find any answer.

I want to ignore usages of large background images.

UPDATE

I have tried like this (only with color)

background : linear-gradient(125deg, #3081ff 31%, #3081FF 78%, #307aff 33%, #307aff 25%)

But, I want to add image with color.

Here is Fiddle which I have tried Fiddle-Demo

And it have problem with responsive, you can check by resizing window.

Upvotes: 2

Views: 65

Answers (1)

Paulie_D
Paulie_D

Reputation: 115109

Multiple background images:

div {
  height: 200px;
  width: 400px;
  margin: auto;
  border: 1px solid grey;
  background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%), url(http://lorempixel.com/image_output/city-q-c-400-200-1.jpg);
}
<div></div>

Or a pseudo-element:

div {
  height: 200px;
  width: 400px;
  margin: auto;
  border: 1px solid grey;
  background-image: url(http://lorempixel.com/image_output/city-q-c-800-400-1.jpg);
  background-size: 100%;
  background-position: center right;
  background-repeat: no-repeat;
  position: relative;
}
div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%);
}
<div></div>

Upvotes: 5

Related Questions