Deckkraft des Background-img reduzieren

[Flure]

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:

        <section id ="about" >
          <div class="box"> 
            <h1>About Me</h1>
          </div> 
        </section>

Die CSS-Datei:

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

 

[winterblut]

Opacity? Wäre jedenfalls ein Hint zur Headline, der Rest hat ja nicht wirklich etwas damit zu tun Oo

Zentrieren:
https://www.knoell-marketing.de/blog-detail/css-div-zentrieren.html

 

[FranzvonAssisi]

Für Grauschleier würde ich einen css filter benutzen :
https://developer.mozilla.org/de/docs/Web/CSS/filter

Und um das Bild durchsichtig zu machen:
opacity: .8

Bin gerade am Handy und hab eventuell das Problem nicht ganz verstanden

Lg

 

[deveth0]

Klingt für mich auch so, als wenn du da einfach einen Filter drüber legen musst. Hier gibt es auch noch Beispiele dazu:
https://css-tricks.com/almanac/properties/f/filter/

 

[Mihawk90]

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/

 

[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

 

[Mihawk90]

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:

section {
    position: relative;
}

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

PS: Typisches XY Problem.

 

[Flure]

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

 

[Mihawk90]

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 (30. September 2019)

Mal zur Veranschaulichung:

https://codepen.io/mihawk90/pen/JjPQYeZ

 

[Flure]

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:

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.

<!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:

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 ....

 

[Mihawk90]

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.

 

[J@ck]

Eine jsfiddle o.ä. mit deinem Code wäre doch recht praktisch um damit direkt Sachen fixen zu können.