how select background image for add css?

Question

I would like to add CSS to the background image but I can't find how to do it.

I would like to add: filter: blur (1rem);

.main-content {
  background: url('assets/img/pain.jpg') no-repeat center center;
  background-size: cover;
  color: black;
}

thank you

You can't do this for background image alone, you have to use a separate element for this and apply filter only to this element (with background image) — cloned, Oct 14 '20 at 18:21

score 0 · Answer 1 · answered Oct 14 '20 at 18:29

Run my snippet below, I used your code and added the proper CSS.

.main-content  {
  background-image: url("https://cdn.pixabay.com/photo/2020/04/15/12/12/flowers-5046413__340.jpg");
  background-size: cover;
  color: black;
  filter: blur(1rem);
  -webkit-filter: blur(8px);
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div class="main-content">Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/></div>

</body>
</html>

how select background image for add css?

1 Answers1