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>CodePudding user response：
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;
}
CodePudding user response：
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.