First question here; so i hope you can help me! I am sorry in advance if i forgot any info!;)
I have a div with a background in it. The background needs to be scaled to fit the whole width of the screen; this works and the background image does remain its aspect ratio. But the problem is that the screen cuts of the height, i expect a scrollbar to scroll down to see the whole background image.
Can somebody help me with this problem?
@import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv {
text-align: center;
/*background-image: url("Afbeelding Landingspagina.png");*/
background-image: url("https://dummyimage.com/600x400/000/fff");
background-repeat: no-repeat;
background-size: cover;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
.body {
padding: 0px;
margin: 0px;
height: 100%;
}
.abouttellus {
text-align: center;
margin-top: 0px;
background-image: url("Images/About Tellus.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}<html>
<head>
<title>XXXX</title>
<link rel="stylesheet" type="text/css" href="tellus.css">
</head>
<body class="body">
<div class= "banner">
<p>ONS VErhaal im<strong>p</strong>act CHoco contact </p>
</div>
<div class="firstdiv">Hier wordt de inhoud voor class "firstdiv" weergegeven
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ligula id lectus faucibus pretium. Vestibulum eget magna tellus. Vestibulum urna tellus, condimentum in ante vitae, viverra volutpat quam. Pellentesque facilisis congue ex, dapibus mattis mi dapibus placerat. Quisque faucibus arcu magna, et laoreet augue ornare sed. Etiam ac molestie augue. Morbi varius scelerisque mauris, a faucibus ligula mattis nec.
Pellentesque imperdiet lobortis vestibulum. Aenean in fringilla lorem, mollis pretium arcu. Ut pulvinar odio euismod, vehicula lectus ut, dictum leo. Cras lacinia metus vitae tellus efficitur vulputate. Donec justo dui, hendrerit a condimentum non, cursus ac lectus. Donec ullamcorper dignissim mi congue eleifend. Donec semper imperdiet turpis. Morbi nec nisi ornare, vulputate diam sit amet, viverra massa. Etiam nec dapibus libero. Cras id diam justo. Vestibulum ac sem egestas dolor viverra condimentum. Integer nunc elit, iaculis ac ultrices ac, euismod ut est. Nunc pellentesque varius velit, vel rutrum justo luctus et. Aliquam hendrerit elit eget tellus vulputate, eget faucibus dolor sodales. Aliquam eros ligula, vulputate eu cursus eget, accumsan nec massa. Sed quis justo congue, malesuada nisi non, sodales lacus.
Pellentesque porta, orci sed dignissim euismod, neque dolor sagittis est, eu vulputate quam odio non ligula. Maecenas id nibh eros. Suspendisse potenti. Fusce eget risus ultricies, elementum leo eu, lobortis sapien. Morbi ut est sed lectus cursus convallis. Suspendisse potenti. Donec et nisl quis erat facilisis dictum et id augue. Sed vel enim lorem. Cras placerat neque arcu, at lacinia mauris lobortis sagittis. Fusce nec suscipit eros. Maecenas quis lectus vel leo tempus suscipit. Pellentesque sit amet mattis dolor, a hendrerit lectus. In eget dapibus orci, eget consequat metus. Suspendisse dapibus euismod ligula tempus congue. Pellentesque convallis, lectus quis tincidunt facilisis, sapien purus mollis libero, non facilisis tortor mi non erat.
Donec nunc eros, ultrices sit amet pulvinar venenatis, semper quis metus. Fusce sed sagittis erat, et euismod nisi. In ac diam sed dui scelerisque dignissim a ut ligula. Maecenas luctus lacus ut tempor semper. Integer semper scelerisque euismod. Integer vel massa non velit commodo placerat. Donec nec nibh imperdiet, ultricies elit vel, interdum mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Suspendisse nibh mauris, pretium ac faucibus sed, tempor ut nunc. Nullam gravida aliquam justo, at tristique ante dictum sed. Vivamus lacinia dui sit amet vehicula ultricies. Nunc volutpat mollis mi vel euismod. Sed quis molestie sapien, sed tincidunt ante. Aliquam nulla risus, sagittis in mi semper, lacinia tincidunt odio. In ut nisl porta, sodales mauris eget, commodo nisi.
Morbi sit amet mattis lacus. Pellentesque non facilisis sapien. Proin quis massa rhoncus, auctor augue in, blandit velit. Mauris pharetra, risus vel tempor convallis, turpis dolor porta elit, sit amet rhoncus eros felis a turpis. Nunc ultrices at nisi sed viverra. Nullam laoreet elementum lectus. Nunc vel lacinia massa, et euismod sem. Quisque sed scelerisque enim, non viverra eros. Maecenas hendrerit egestas elit non congue. Curabitur dictum lobortis ligula, sed facilisis lacus aliquam id. Etiam porttitor, nunc sit amet lacinia blandit, lectus sem efficitur magna, vel dapibus orci ex non arcu. Aenean enim eros, malesuada a bibendum eget, luctus eget lectus. Donec auctor massa eget mauris aliquam vulputate. Maecenas ultricies enim ipsum, ac viverra nisl rhoncus a. Nam molestie eget ex vel faucibus.
Nullam et ultrices elit, vitae elementum turpis. Vestibulum justo nibh, semper sed diam et, malesuada blandit mauris. Suspendisse est massa, tempus vitae rhoncus sit amet, condimentum vitae nisl. Praesent porta malesuada orci ac mattis. Quisque viverra est rhoncus, pretium orci vitae, blandit orci. Donec ut tellus libero. Quisque facilisis tincidunt suscipit. In pharetra augue eu massa scelerisque euismod id ut justo.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sollicitudin feugiat est. Fusce et dui augue. Praesent iaculis, nunc non dictum luctus, risus metus malesuada metus, eu sollicitudin leo odio nec augue. Pellentesque vehicula iaculis lorem a porta. Proin vulputate, sapien sit amet porta dapibus, risus lacus elementum lorem, porta sodales tellus orci ac libero. In egestas sem ac metus faucibus aliquet.
Curabitur auctor quam in metus sollicitudin consequat. Nunc ut magna purus. Nunc bibendum, lorem non hendrerit laoreet, lectus arcu ultrices metus, at elementum quam purus ut eros. Fusce vitae porttitor velit. Etiam consectetur accumsan suscipit. Morbi vitae est tincidunt, ornare purus sit amet, elementum mi. Aenean maximus eros quis lorem ultricies bibendum. Etiam aliquam rhoncus tincidunt. Donec posuere libero magna, nec volutpat lectus rutrum non. Pellentesque venenatis magna a nulla iaculis, a rutrum erat dignissim. Donec eleifend, dolor vel ullamcorper mollis, lorem ipsum interdum lacus, id ornare ligula nisi a turpis. Etiam sit amet augue in mi finibus dapibus. Aliquam sit amet vulputate elit. Nulla convallis rutrum nisi, quis pulvinar ante congue eget.
Cras ut fermentum est. Curabitur placerat dolor in dolor facilisis, bibendum scelerisque mauris efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis ornare arcu. Sed hendrerit ex nibh, quis pretium nisl fringilla id. Cras id massa lectus. Nulla pharetra odio et aliquam posuere. Vivamus a eros pharetra, accumsan augue id, dictum ante. Nam eu venenatis justo. Nulla auctor sed quam vel elementum. Nullam et interdum enim, sit amet accumsan justo. Vestibulum nunc eros, placerat id convallis quis, convallis at nisi. Ut ultrices vel justo eget dignissim. Morbi augue magna, malesuada nec magna eu, malesuada gravida neque.</div>
</body>
</html>CodePudding user response：
Use an image tag
<div class="firstdiv"><img src="./Afbeelding_Landingspagina.png"/></div>
remove overflow hidden, add width and height to image
.firstdiv {
overflow: visible;
}
.firstdiv > img {
widht: 100%;
height: 100%;
}
If you want to display text on top of the image without messing up you can use z-index and position: abosolute. For example
.firstdiv > p {
z-index: 999;
position: absolute;
top: 10px;
}
CodePudding user response：
Set your body with height: auto;
Set in your .firstDiv the background-position:center; min-height:100vh; this will make it the whole div height and keeps the image aspect ratio.
@import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv {
text-align: center;
/*background-image: url("Afbeelding Landingspagina.png");*/
background-image: url("https://dummyimage.com/600x600/0011ff/f50e0e");
background-repeat: no-repeat;
background-size: cover;
background-position:center;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
min-height:100vh;
}
.body {
padding: 0px;
margin: 0px;
height: auto;
}
.abouttellus {
text-align: center;
margin-top: 0px;
background-image: url("Images/About Tellus.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}<html>
<head>
<title>XXXX</title>
<link rel="stylesheet" type="text/css" href="tellus.css">
</head>
<body class="body">
<div class= "banner">
<p>ONS VErhaal im<strong>p</strong>act CHoco contact </p>
</div>
<div class="firstdiv">Hier wordt de inhoud voor class "firstdiv" weergegeven
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ligula id lectus faucibus pretium. Vestibulum eget magna tellus. Vestibulum urna tellus, condimentum in ante vitae, viverra volutpat quam. Pellentesque facilisis congue ex, dapibus mattis mi dapibus placerat. Quisque faucibus arcu magna, et laoreet augue ornare sed. Etiam ac molestie augue. Morbi varius scelerisque mauris, a faucibus ligula mattis nec.
Pellentesque imperdiet lobortis vestibulum. Aenean in fringilla lorem, mollis pretium arcu. Ut pulvinar odio euismod, vehicula lectus ut, dictum leo. Cras lacinia metus vitae tellus efficitur vulputate. Donec justo dui, hendrerit a condimentum non, cursus ac lectus. Donec ullamcorper dignissim mi congue eleifend. Donec semper imperdiet turpis. Morbi nec nisi ornare, vulputate diam sit amet, viverra massa. Etiam nec dapibus libero. Cras id diam justo. Vestibulum ac sem egestas dolor viverra condimentum. Integer nunc elit, iaculis ac ultrices ac, euismod ut est. Nunc pellentesque varius velit, vel rutrum justo luctus et. Aliquam hendrerit elit eget tellus vulputate, eget faucibus dolor sodales. Aliquam eros ligula, vulputate eu cursus eget, accumsan nec massa. Sed quis justo congue, malesuada nisi non, sodales lacus.
Pellentesque porta, orci sed dignissim euismod, neque dolor sagittis est, eu vulputate quam odio non ligula. Maecenas id nibh eros. Suspendisse potenti. Fusce eget risus ultricies, elementum leo eu, lobortis sapien. Morbi ut est sed lectus cursus convallis. Suspendisse potenti. Donec et nisl quis erat facilisis dictum et id augue. Sed vel enim lorem. Cras placerat neque arcu, at lacinia mauris lobortis sagittis. Fusce nec suscipit eros. Maecenas quis lectus vel leo tempus suscipit. Pellentesque sit amet mattis dolor, a hendrerit lectus. In eget dapibus orci, eget consequat metus. Suspendisse dapibus euismod ligula tempus congue. Pellentesque convallis, lectus quis tincidunt facilisis, sapien purus mollis libero, non facilisis tortor mi non erat.
Donec nunc eros, ultrices sit amet pulvinar venenatis, semper quis metus. Fusce sed sagittis erat, et euismod nisi. In ac diam sed dui scelerisque dignissim a ut ligula. Maecenas luctus lacus ut tempor semper. Integer semper scelerisque euismod. Integer vel massa non velit commodo placerat. Donec nec nibh imperdiet, ultricies elit vel, interdum mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Suspendisse nibh mauris, pretium ac faucibus sed, tempor ut nunc. Nullam gravida aliquam justo, at tristique ante dictum sed. Vivamus lacinia dui sit amet vehicula ultricies. Nunc volutpat mollis mi vel euismod. Sed quis molestie sapien, sed tincidunt ante. Aliquam nulla risus, sagittis in mi semper, lacinia tincidunt odio. In ut nisl porta, sodales mauris eget, commodo nisi.
Morbi sit amet mattis lacus. Pellentesque non facilisis sapien. Proin quis massa rhoncus, auctor augue in, blandit velit. Mauris pharetra, risus vel tempor convallis, turpis dolor porta elit, sit amet rhoncus eros felis a turpis. Nunc ultrices at nisi sed viverra. Nullam laoreet elementum lectus. Nunc vel lacinia massa, et euismod sem. Quisque sed scelerisque enim, non viverra eros. Maecenas hendrerit egestas elit non congue. Curabitur dictum lobortis ligula, sed facilisis lacus aliquam id. Etiam porttitor, nunc sit amet lacinia blandit, lectus sem efficitur magna, vel dapibus orci ex non arcu. Aenean enim eros, malesuada a bibendum eget, luctus eget lectus. Donec auctor massa eget mauris aliquam vulputate. Maecenas ultricies enim ipsum, ac viverra nisl rhoncus a. Nam molestie eget ex vel faucibus.
Nullam et ultrices elit, vitae elementum turpis. Vestibulum justo nibh, semper sed diam et, malesuada blandit mauris. Suspendisse est massa, tempus vitae rhoncus sit amet, condimentum vitae nisl. Praesent porta malesuada orci ac mattis. Quisque viverra est rhoncus, pretium orci vitae, blandit orci. Donec ut tellus libero. Quisque facilisis tincidunt suscipit. In pharetra augue eu massa scelerisque euismod id ut justo.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sollicitudin feugiat est. Fusce et dui augue. Praesent iaculis, nunc non dictum luctus, risus metus malesuada metus, eu sollicitudin leo odio nec augue. Pellentesque vehicula iaculis lorem a porta. Proin vulputate, sapien sit amet porta dapibus, risus lacus elementum lorem, porta sodales tellus orci ac libero. In egestas sem ac metus faucibus aliquet.
Curabitur auctor quam in metus sollicitudin consequat. Nunc ut magna purus. Nunc bibendum, lorem non hendrerit laoreet, lectus arcu ultrices metus, at elementum quam purus ut eros. Fusce vitae porttitor velit. Etiam consectetur accumsan suscipit. Morbi vitae est tincidunt, ornare purus sit amet, elementum mi. Aenean maximus eros quis lorem ultricies bibendum. Etiam aliquam rhoncus tincidunt. Donec posuere libero magna, nec volutpat lectus rutrum non. Pellentesque venenatis magna a nulla iaculis, a rutrum erat dignissim. Donec eleifend, dolor vel ullamcorper mollis, lorem ipsum interdum lacus, id ornare ligula nisi a turpis. Etiam sit amet augue in mi finibus dapibus. Aliquam sit amet vulputate elit. Nulla convallis rutrum nisi, quis pulvinar ante congue eget.
Cras ut fermentum est. Curabitur placerat dolor in dolor facilisis, bibendum scelerisque mauris efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis ornare arcu. Sed hendrerit ex nibh, quis pretium nisl fringilla id. Cras id massa lectus. Nulla pharetra odio et aliquam posuere. Vivamus a eros pharetra, accumsan augue id, dictum ante. Nam eu venenatis justo. Nulla auctor sed quam vel elementum. Nullam et interdum enim, sit amet accumsan justo. Vestibulum nunc eros, placerat id convallis quis, convallis at nisi. Ut ultrices vel justo eget dignissim. Morbi augue magna, malesuada nec magna eu, malesuada gravida neque.</div>
</body>
</html>