Deckkraft des Background-img reduzieren

Flure

Cadet 3rd Year
Registriert
Apr. 2016
Beiträge
61
Hallo,

Ich bin gerade dabei eine Webseite zu erstellen und dafür würde ich gerne mein Hintergrundbild etwas dimmen. Mir ist das auch schon gelungen jedoch mochte ich die Seite mit Content befüllen, allerdings scheitere ich hier am positionieren. Besser gesagt, ich schaffe es nicht meinen Inhalt zu zentrieren.

Aufbau des HTML Codes:
Code:
        <section id ="about" >
          <div class="box"> 
            <h1>About Me</h1>
          </div> 
        </section>

Die CSS-Datei:
Code:
section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    text-align: center;
}
section h1 {
    color: white;
    font-size: 50px;
}
 #about {
    background: url(about.jpg);
}
.box {
    position: relative;
    width: 50%;
    padding: 500px;
    background-color: rgba(255,255,255,0.2);
    margin: auto;   
}

Meine Vorgehensweise:
Ich habe der Section ein Hintergrundbild zugewiesen und anschließend einen "div" erstellt, um diesen Grauen schleier zu erzeugen. Jetzt würde ich gern dem Browser mitteilen, dass er 100% des verfügbaren screens verwendet.

Zurzeit habe ich meiner Meinung nach eine 0815 Lösung und überdecke einfach großzügig das Bild. Das Problem ist aber, sollte jemand meine Webseite mit einen 4k Monitor besuchen, würde er das natürlich erkennen. Noch dazu verschiebt sich mein Content.
Ich hoffe ich konnte mich einigermaßen verständlich ausdrücken. Danke jetzt schon mal für eure Zeit :)

Lg Flo
 
Filter funktionieren aber auf das gesamte Element, inklusive Childs.

Das heißt alles was er hier filtern würde, würde auch auf sämtliche Schrift gehen.

Lösung dafür wäre nur, das Hintergrundbild nicht auf die section selbst zu legen, sondern auf ein Pseudo-Element für die section, und dort den Filter zu machen:

https://css-tricks.com/apply-a-filter-to-a-background-image/
 
  • Gefällt mir
Reaktionen: Flure
Danke für eure antworten.
Ich habe mit opacity schon herum gespielt, aber das Problem ist, dass mit diesem Filter auch die child tags betroffen sind.

Sprich wenn ich mit opacity arbeite ist das Bild UND mein Content leicht grau. Ich möchte in meinem Fall aber nur die Deckkraft des Bildes rausnehmen und den Content zu 100% anzeigen.

Lg
 
s. den Beitrag über dir.

Um aber mal noch die Frage zu beantworten, wie du die Größe des divs an die der section anpasst:

CSS:
section {
    position: relative;
}

div {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
}

PS: Typisches XY Problem.
 
  • Gefällt mir
Reaktionen: Flure und FranzvonAssisi
Mihawk90 schrieb:
Filter funktionieren aber auf das gesamte Element, inklusive Childs.

Das heißt alles was er hier filtern würde, würde auch auf sämtliche Schrift gehen.

Lösung dafür wäre nur, das Hintergrundbild nicht auf die section selbst zu legen, sondern auf ein Pseudo-Element für die section, und dort den Filter zu machen:

https://css-tricks.com/apply-a-filter-to-a-background-image/
Danke, danach habe ich gesucht.

"Pseudo-Element für die Section".... hmmm, das hat mich ein bisschen verwirrt und höre ich zum ersten mal. Ich habe leider keine Ahnung wie ich das Umsetzen soll, aber ich studiere mal deine Quelle ;)

Danke :)
 
Pseudo-Elemente sind Elemente, die nicht im DOM geführt werden (anders gesagt: welche die du nicht selbst schreibst), sondern dynamisch aufgrund der CSS Definition erzeugt werden.
Mit Pseudo-Elementen kann auch nicht (bzw. nur sehr begrenzt) interagiert werden.

Erzeugt werden sie mit ::before und ::after, von der CSS Seite her kann man aber (fast) alles damit machen.
Ergänzung ()

Mal zur Veranschaulichung:

https://codepen.io/mihawk90/pen/JjPQYeZ
 
Zuletzt bearbeitet:
Mihawk90 schrieb:
s. den Beitrag über dir.

Um aber mal noch die Frage zu beantworten, wie du die Größe des divs an die der section anpasst:

CSS:
section {
    position: relative;
}

div {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
}

PS: Typisches XY Problem.

Ich habe ehrlich gedacht, dass ich das Boxen-Modell verstanden habe.... Aber dieses Problem belehrt mich eines besseren. Das gute ist, die Deckkraft konnte ich reduzieren.

Code:
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Startseite</title>
    <link href="C:\Users\Flo\Desktop\Hompage\style1.css" rel = "stylesheet" type = "text/css">
  </head>
  <body>
      <div class="module">
          <div class="module-inside">
            <h2>test</h2>
            <p>hdffffffffffffffffffffffffffffffffdjfhjdsfhfdjk </br>
              dfkjkddddddddddd </br>
              dfkjdkkkkkkkkkkkkkkkkkkkkkkk
            </p>
          </div>
      </div>
  </body>
</html>

CSS:
Code:
body {
    height: 100vh;
    padding: 0;
    display: grid;
    align-content: center;
    justify-content: center;
  }
  .module {
    width: 100%;
    height: 100vh;
    top: 0; left: 0;
    display: flex;
    place-items: center;
    color: #ff43ea;
    position: relative;
  }
  .module::before {
    content: "";
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(about.jpg);
    background-size: cover;
    filter: grayscale(60%);
  }
  .module-inside {
    position: relative;
    font: bold 20px sans-serif;
  }

Ich versteh nicht wo mich der Browser in der Breite reduziert...? Ich kann ihm nicht sagen, dass er die volle Breite meines Bildschirm nützen soll :( so sieht das bei mir aus ....

1569854776586.png
 
Schwer zu sagen... mit dem Code kann ich das nicht reproduzieren. Bei sowas mal in die Devtools schauen und sehen welches Element markiert wird wenn du mit der Cursorauswahl über das weiße fährst.
 
Eine jsfiddle o.ä. mit deinem Code wäre doch recht praktisch um damit direkt Sachen fixen zu können.
 
Zurück
Oben