I want to make parallax scroll but it seems like background-attachment isn't working at all for me.
What should I do to make the blue background fixed and let the second div to scroll over it?
#charset "UTF-8";
* {
box-sizing: border-box;
}
body, html {
margin: 0;
font-family: 'Overpass', sans-serif;
height: 100%;
}
#mainpage {
width: 100%;
height: 100%;
background-color: #83b2d9;
background-attachment: fixed;
background-size: cover;
}
#subpage {
width: 100%;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>trrtr</title>
</head>
<body>
<div id="mainpage">
</div>
<div id="subpage">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur, sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
</div>
</body>
</html>
By making the MainPage div position:fixed;, you can make that div to stay at the screen forever......
#charset "UTF-8";
* {
box-sizing: border-box;
}
body, html {
margin: 0;
font-family: 'Overpass', sans-serif;
height: 100%;
}
#mainpage {
width: 100%;
height: 100%;
background-color: #83b2d9;
background-attachment: fixed;
background-size: cover;
position:fixed;
left:0;
top:0;
z-index:-1;
}
#subpage {
width: 100%;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>trrtr</title>
</head>
<body>
<div id="mainpage">
</div>
<div id="subpage">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur, sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
</div>
</body>
</html>
you can try this :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>trrtr</title>
</head>
<body>
<div id="mainpage" >
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="subpage">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur, sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
</div>
</div>
</body>
</html>
#charset "UTF-8";
* {
box-sizing: border-box;
}
body, html {
margin: 0;
font-family: 'Overpass', sans-serif;
height: 100%;
}
#mainpage {
width: 100%;
height: 100%;
background-image: url('https://static.pexels.com/photos/34950/pexels-photo.jpg');
background-attachment: fixed;
background-size: cover;
}
#subpage {
width: 100%;
background-color: white;
}
and here's a fiddle
Related
I am trying to put a scrollable gradient background at the bottom of my body.
/*Set Up*/
* {
padding: 0;
margin: 0;
}
nav,
header,
main,
footer,
section,
article,
aside {
display: block
}
/*Set Up*/
* {
color: white;
}
html {
height: 100%;
}
body {
font-family: 'Poppins', sans-serif;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background: linear-gradient(to bottom right, #040d21, #040d21, #ffffff) no-repeat bottom;
/*linear-gradient(to bottom right , #042d6b, #040d21, #040d21) no-repeat scroll*/
/*url("../media/techgrid.png")*/
background-color: #040d21;
background-size: 100%;
height: 1000px;
/* 461f48*/
}
header {
margin: 0 auto;
border: red solid;
text-align: center;
width: 60%;
}
main {
margin: 0 auto;
border: red solid;
width: 70%;
position: center;
}
p {
text-align: center;
padding: 20px;
}
h1 {
font-weight: 800;
}
<!DOCTYPE html>
<html>
<head>
<title>Mueller-UIs</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;800&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>This is a fresh website</h1>
<p>This is a beautiful test paragraph.</p>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
</main>
<footer>
</footer>
</body>
</html>
The result is a scrollable gradient at the top, although I put background: bottom:
The gradient can be put to the bottom by background: fixed but then it just gets fixated to the viewport.
How can I put it to the bottom of body so it stays there and make it scrollable?
In your CSS code you have specified a height of 100% in the html area and a height of 1000px in the body area. If you remove these two, everything should work as you wanted it to.
This is what the code would look like:
/*Set Up*/
* {
padding: 0;
margin: 0;
}
nav,
header,
main,
footer,
section,
article,
aside {
display: block
}
/*Set Up*/
* {
color: white;
}
body {
font-family: 'Poppins', sans-serif;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background: linear-gradient(to bottom right, #040d21, #040d21, #ffffff) no-repeat bottom;
/*linear-gradient(to bottom right , #042d6b, #040d21, #040d21) no-repeat scroll*/
/*url("../media/techgrid.png")*/
background-color: #040d21;
background-size: 100%;
/* 461f48*/
}
header {
margin: 0 auto;
border: red solid;
text-align: center;
width: 60%;
}
main {
margin: 0 auto;
border: red solid;
width: 70%;
position: center;
}
p {
text-align: center;
padding: 20px;
}
h1 {
font-weight: 800;
}
<!DOCTYPE html>
<html>
<head>
<title>Mueller-UIs</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;800&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>This is a fresh website</h1>
<p>This is a beautiful test paragraph.</p>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
</main>
<footer>
</footer>
</body>
</html>
I have a requirement to Print a document in A4 sheet, in such a way that first part need to be printed in first half( i.e A5 sheet measurement) and that too with 90degree rotation and second part in next A5 sheet in normal way. I could do that by randomly fine tuning the margins.( This is having problem with different devices, Android phones and tab, where something working fine , is not working in other phone) I am sure there will be a right way to do that. here is my html code.Appreciate your help on this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 210mm X 296 mm */
.A5 {
height: 148mm;
border: 2px red solid;
}
.rotate {
transform: rotate(90deg);
border: 2px magenta solid;
margin-left: 50mm;
margin-top: -75mm;
min-height: 296mm;
max-width: 148mm;
}
</style>
</head>
<div class="A5">
<div class="rotate">
***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores.
Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur
reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad
voluptates deleniti. Odio!***END**
</div>
</div>
<div class="A5">
***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt,
dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis
quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates
deleniti. Odio!***END**
</div>
</html>
This is the solution I could use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
:root {
--page-width: 210mm;
--page-height: 296mm;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.A5 {
margin: 0px;
border: 2px black solid;
/* Note: height and width interchanged because of rotation */
width: var(--page-height);
height: var(--page-width);
display: flex;
justify-content: center;
align-items: center;
}
.rotate {
transform: rotate(90deg);
height: var(--page-height);
width: var(--page-width);
border: 2px magenta solid;
}
.al {
align-items: flex-start;
}
</style>
</head>
<div class="A5">
<div class="rotate">***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates deleniti. Odio!***END**</div>
</div>
<div class="A5 al">***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates deleniti. Odio!***END**</div>
</html>
I want to make a parallax scrolling but background-attachment is not working for me:(
The bgcolor is actually #83b2d9. Is there even a way that I can use background-color instead of background-image for this?
#charset "UTF-8";
* {
box-sizing: border-box;
}
body, html {
margin: 0;
font-family: sans-serif;
height: 100%;
}
#mainpage {
width: 100%;
height: 100%;
background-image: url(img/bgcolor.png);
background-attachment: fixed;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>untitled</title>
</head>
<body>
<div id="mainpage">
</div>
<div id="subpage">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur, sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
</div>
</body>
</html>
#charset "UTF-8";
* {
box-sizing: border-box;
}
body, html {
margin: 0;
font-family: sans-serif;
height: 100%;
}
#mainpage {
width: 100%;
height: 100%;
background-color:#83b2d9;
background-attachment: fixed;
background-size: cover;
display:block
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>untitled</title>
</head>
<body>
<div id="mainpage">
</div>
<div id="subpage">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur, sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
</div>
</body>
</html>
You can use linear-gradient to create the needed color and you will still have a background-image and you can apply background-attachement:
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
font-family: sans-serif;
height: 100%;
}
#mainpage {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, #83b2d9, #83b2d9);
background-attachment: fixed;
background-size:100% 50%;
background-position:0 50%;
background-repeat:no-repeat;
}
<div id="mainpage">
</div>
<div id="subpage">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur
iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur,
sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur
iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur,
sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur
iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur,
sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
</div>
**CSS**
* {
box-sizing: border-box;
}
body, html {
margin: 0;
font-family: sans-serif;
height: 100%;
}
#mainpage {
width: 100%;
height: 100%;
/* background-image: url(img/bgcolor.png); */
background-color: #83b2d9;
background-attachment: fixed;
background-size: cover;
}
**HTML**
<!DOCTYPE html>
<html>
<html>
<head>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>untitled</title>
<title>untitled</title>
</head>
</head>
<body>
<body>
<div id="mainpage">
<div id="mainpage">
<div id="subpage">
<div id="subpage">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur, sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur, sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
</div>
</div>
</div>
</body>
</body>
</html>
</html>
im learning the box models so i created three div classes and styled them but nothing changed after styling. Is it dat u cant style a div class unless it has a sub element like a p tag ,h1 tag and the likes. I tried styling ordinary divs and it worked just this div classes...here is the code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: grey;
}
.1{
background-color:green;
width: 250px;
margin:auto;
}
.2{
background-color: yellow;
}
</style>
</head>
<body>
<div class="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates sint inventore, provident neque, dolore saepe asperiores dolorum laborum alias exercitationem molestiae repellat necessitatibus at in dolorem tenetur blanditiis. Doloremque, id!</div>
<div class="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus illo, accusantium! Optio quisquam incidunt odio repellat, quis illum officia suscipit pariatur quasi ullam. Voluptatibus perspiciatis in nihil vero reprehenderit corporis.</div>
<div class="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor voluptate voluptas molestiae nesciunt et illo nobis atque quasi blanditiis quas nihil veniam qui debitis, mollitia sapiente eos animi cupiditate.</div>
</body>
</html>
Class can't start with a number, this is why your styles aren't working.
.one{
background-color:green;
width: 250px;
margin:auto;
}
<div class="one">Hello World!</div>
Classes names must begin with a letter. Some browsers may erroneously support them, though.
From CSS Synatx module level
"In CSS3, identifiers (including element names, classes, and IDs in
selectors (see [SELECT] [or is this still true])) can contain only the
characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus
the hyphen (-) and the underscore (_); they cannot start with a digit
or a hyphen followed by a digit. They can also contain escaped
characters and any ISO 10646 character as a numeric code (see next
item). For instance, the identifier "B&W?" may be written as "B\&W\?"
or "B\26 W\3F". (See [UNICODE310] and [ISO10646].)"
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: grey;
}
.div1{
background-color:green;
width: 250px;
margin:auto;
}
.div2{
background-color: yellow;
}
</style>
<div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates sint inventore, provident neque, dolore saepe asperiores dolorum laborum alias exercitationem molestiae repellat necessitatibus at in dolorem tenetur blanditiis. Doloremque, id!</div>
<div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus illo, accusantium! Optio quisquam incidunt odio repellat, quis illum officia suscipit pariatur quasi ullam. Voluptatibus perspiciatis in nihil vero reprehenderit corporis.</div>
<div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor voluptate voluptas molestiae nesciunt et illo nobis atque quasi blanditiis quas nihil veniam qui debitis, mollitia sapiente eos animi cupiditate.</div>
Hello I think you have issues with your class name you can not set your class name only numeric please change class name try below code it will helps you.
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: grey;
}
.div1{
background-color:green;
width: 250px;
margin:auto;
}
.div2{
background-color: yellow;
}
</style>
<div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates sint inventore, provident neque, dolore saepe asperiores dolorum laborum alias exercitationem molestiae repellat necessitatibus at in dolorem tenetur blanditiis. Doloremque, id!</div>
<div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus illo, accusantium! Optio quisquam incidunt odio repellat, quis illum officia suscipit pariatur quasi ullam. Voluptatibus perspiciatis in nihil vero reprehenderit corporis.</div>
<div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor voluptate voluptas molestiae nesciunt et illo nobis atque quasi blanditiis quas nihil veniam qui debitis, mollitia sapiente eos animi cupiditate.</div>
I am trying to make the section element to start from 1px below the header element, so I set its top property as in the css code. I thought I was doing every thing correctly but it is still starting half way into the header element.
Any ideas? Thanks
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
top: calc(1.5em + 1px);
background-color: red;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>
Add position:relative in section top is not render without position
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
top: calc(1.5em + 1px);
background-color: red;
position:relative;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>
remove top from the section and add the margin-top for it
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
background-color: red;
margin-top:45px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>
There are two things you need to do.
First: Give following css to remove default margin and padding of browser.
* {
margin: 0;
padding: 0;
}
Second: Give margin-top: 1px; to section instead of top.
Check how top works.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
background-color: red;
margin-top: 1px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>
The reason for this is when the element is fixed, then it gets taken out of the "flow" of the document.
You can fix it with adding a margin-top to the section area and removing the top;
section {
margin-top: 40px;
background-color: red;
}
Hopefully this helps
You need to ensure that <section> is set to position: relative
Please see the following fiddle: https://jsfiddle.net/p741tbxx/
section {
top: calc(1.5em + 1px);
background-color: red;
position: relative;
}