HTML CSS Background Filter?

Hi ich habe seit einer Woche angefangen mit das Programmieren beizubringen, und bin nun auf folgendes Problem gestoßen.

Ich habe bei der HTML Datei in <body> das hier drin :

<body>

    <header id="header">

        <ul>

            <li><a href="" class="active">Home</a></li>

            <li><a href="" class="active"><b>Tv Shows</b></a></li>

            <li><a href="" class="active">Movies</a></li>

            <li><a href="" class="active">Recetly Added</a></li>

        </ul>

        <a href="" class="logo">NETFLIX</a>

    </header>

    <section>

        <img src="logo.png" alt="" style="width: 700px; height: 300px; position: absolute; left: 40px; top: 100px;">

        <div class="content">

            <div class="details">

                <span>99% Match</span>

                <span>2011-2022</span>

                <span>18+</span>

            </div>

            <div class="button">

                <span class="btn1"> <img src="playbtn.png" alt="" style="position: relative; top: 8px;"> Play</span>

                <span class="btn2">+ My List</span>

            </div>

        </div>

    </section>

</body>

Und in der CSS Datei habe ich den Body so definiert:

body{

    background: url(wallpaper1.jpg);

    background-size: cover;

    background-repeat: no-repeat;

    height: 100vh;

Nun habe ich das Problem wenn ich nun einen Filter wie z.B Brightness anwenden will macht es ja nun logischerweise den ganzen Body Dunkler aber ich möchte nur den background verdunkelnm, sodass die anderen Elemente stärker zum Vorschein kommen.

Und meine zweite Frage wäre diesen background zu Skalieren weil auf dem Original Bild ist unten links ein kleiner Schriftzug der auf der Website nun abgeschnitten ist.

Vielen Dank :)

Bild zum Beitrag
HTML, Webseite, CSS, Webdesign, Webentwicklung
Weitere Inhalte können nur Nutzer sehen, die bei uns eingeloggt sind.