How to make such a background ?

tried to pull it alone

`@media (orientation: landscape) { /* put a blurred image in the background, just for pretty presentation */ body::before { content: ''; display: block; height: 100vh; width: 100%; background: url("адрес/1.jpeg") center/cover; -webkit-filter: blur(5vh); filter: blur(5vh); -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0.4; }`

But it does not come out.

Closed due to the fact that off-topic participants Enikeyschik , andreymal , LFC , freim , 0xdb Feb 21 at 11:40 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - Enikeyschik, andreymal, LFC, freim, 0xdb
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • The stone flower of the master Danila does not come out, and there is no such term in programming. There is a desired result and there is a result. How is your result different from what you want? - Enikeyschik
  • so that my divas fall under the background. - Alexander Karakozov

1 answer 1

The simplest example is to use the pseudo-element :before for a blurred background and set it to z-index: -1 .

 body { display: block; width: 100%; min-height: 100vh; margin: 0; position: relative; } body::before { content: ''; display: block; width: 100%; height: 100%; background: url('https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg') no-repeat center center / cover; position: fixed; left: 0; top: 0; right: 0; bottom: 0; filter: blur(5px); z-index: -1; } .content { display: block; width: 50%; height: 150px; border-radius: 10px; background: #fff; margin: 0 auto; position: relative; top: 50px; } 
 <div class="content"></div>

  • a good, good answer (+) Why don’t you stimulate the author of the question? I would have done a plus, and he did the same thing in response, but he doesn’t have enough rating and, with all his desire, he cannot. :) - Alexandr_TT