Webpage background to expand with content

user_11966093 0
Viewed 49

I'm working on a html/css project and have issues with my webpage background. I've added a comment field at the end of my code, and the problem is that the "fixed"-value does not seem to care if I add comments -> it will just stay same size and my comments are shown below the picture.enter image description here

I tried changing values in my pseudoclass wrapper:after, and i can change the height to any fixed size, but I'd like it to be "growing" with comments added.

I'd appreciate any help, and have created a fiddle for better understanding:https://jsfiddle.net/w0h4bayn/2/

    .wrapper {
    position: relative;
    clear: both;
    background-size: cover;
    background: url("../images/background3.jpg") top center fixed;
    text-transform: uppercase;
  }
  

    /*Pseudoklasse für Anzeige des Hintergrundbildes*/
 
  .wrapper:after {
    padding-top: 75%;
    display: block;
    content: '';
    min-height:100%
  }
        <div class ="wrapper">
            <div class="main">
                <h2>Neuer Tagebuch-Eintrag</h2>
                    <form method="post" action="<?= $_SERVER['PHP_SELF'] ?>">
                    Vorname<br />
                    <input type="text" name="vorname" value="" /><br /><br />
                    Name<br />
                    <input type="text" name="name" value="" /><br /><br />
                    Dein Eintrag<br />
                    <textarea rows="10" cols="60" name="eintrag"></textarea>
                    <br />
                    <input type="file" name="datei"><br>
                    <input type="submit" name="submit" />
                    </form>
                    <br />                         
                        <div>
                            <h3>Kommentare:</h3>
                            This<br>
                            This<br>
                            This<br>
                            This<br>This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                     </div>
            </div>

css html
2 Answers

I only noticed your problem with the background when resizing the browser. Your "this" content was not being contained in the background, which is what I assume is the problem is.

Main Problem:

You're using absolute positioning on your .main. Absolute positioning especially on parent containers is not very responsive. I changed your positioning from absolute to position: relative; and that solved your background covering the content issue on all screens.

Secondary Problem:

Now that your background is properly covering the contents, you're stuck with a big white bar between "TAGEBUCH" and where the background starts. This is due to the margin-top: 5%; on your .wrapper class. You can fix this margin by adding overflow: scroll; to your .wrapper parent div, which ultimately solves this issue.

.body{
    background-color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header {
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
    background: #04862b8c;
    color: white;
  }


  /*Animation Header*/

.header h1{
    font-size: 30px;
    animation-delay: .4s;
}  
.header p {
    font-size: 20px;
    animation-delay: .6s;
  }

  .title-animation {
    animation: pop-in 1s ease-out forwards;
    opacity: 0;
  }

  .subtitle-animation {
    animation: left-to-right 1s ease-out forwards;
    opacity: 0;
  }


  /*Formatierung div-element*/

    .wrapper {
    position: relative;
    clear: both;
    background-size: cover;
    background: url("https://images.pexels.com/photos/261579/pexels-photo-261579.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260") top center fixed;
    text-transform: uppercase;
    overflow: scroll;
  }
  

    /*Pseudoklasse für Anzeige des Hintergrundbildes*/
 
  .wrapper:after {
    padding-top: 75%;
    display: block;
    content: '';
    min-height:100%
  }


  .main {
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    color: black;
    text-align: left;
    margin-top: 5%;
    padding-left: 15em;
  }

  /*Form-Formatierung*/

  textarea {
    caret-color: rgb(25, 0, 255);  
    width: 60em;
    height: 15em;
    border: 1px solid #cccccc;
    padding: 0.5em;
    font-family: Tahoma, sans-serif;
    resize: none;
  }

form {
    caret-color: rgb(25, 0, 255);  
    padding: 0.5em;
    font-family: Tahoma, sans-serif;
}

  /*Keyframes*/

  @keyframes pop-in {
    0% {
      opacity: 0;
      transform: translateY(-4rem) scale(.8);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes left-to-right {
    0% {
      opacity: 0;
      transform: translateY(-4rem) scale(.8);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }
<html>
    <head>
        <title>Online-Tagebuch</title>
        <link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
    </head>
    <body class="body">
        <div class = "header">
            <h1 class="title-animation">Tagebuch</h1>
            <p class="subtitle-animation">Das Online Tagebuch</p>
        </div>
        <div class ="wrapper">
            <div class="main">
                <h2>Neuer Tagebuch-Eintrag</h2>
                    <form method="post" action="<?= $_SERVER['PHP_SELF'] ?>">
                    Vorname<br />
                    <input type="text" name="vorname" value="" /><br /><br />
                    Name<br />
                    <input type="text" name="name" value="" /><br /><br />
                    Dein Eintrag<br />
                    <textarea rows="10" cols="60" name="eintrag"></textarea>
                    <br />
                    <input type="file" name="datei"><br>
                    <input type="submit" name="submit" />
                    </form>
                    <br />                         
                        <div>
                            <h3>Kommentare:</h3>
                            This<br>
                            This<br>
                            This<br>
                            This<br>This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                     </div>
            </div>
        </div>
    </body>
</html>

Note for future projects: Stay clear from absolute positioning as much as possible, especially on parent elements. Absolute positioning is effective on images, buttons, paragraphs, etc. I would become an expert on flex-box, which will help with responsiveness in the future.

user_164963570

The pseudo-element is ::after but it seems unnecessary here. Changing the background properties should fix your issue.

.wrapper {
    position: relative;
    clear: both;
    background: url("https://images.pexels.com/photos/261579/pexels-photo-261579.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260") no-repeat;
    background-size: 100%;
    text-transform: uppercase;
  }
user_166037140
Related