I'm trying to make the header stick on the top, throughout the page. And It works fine till class="section" but the PROBLEM is after first section the header element become hidden.
I have included some part of the code hope it'll help you understand my problem.
*{
box-sizing: border-box;
}
:root {
--primary-color: #b90415;
--primary-color-hover: #d3071b;
--secondary-color: #103063;
--secondary-color-hover: #143f85;
--light-color: #f4f4f4;
--spotify-green:rgba(30, 215, 96,0.9);
}
html,body{
font-family: 'Nunito',sans-serif;
width: 100%;
margin: 0;
height: 100%;
line-height: 1.9em;
color: var(--light-color);
scroll-behavior: smooth;
}
/*For all Links*/
a{
text-decoration: none;
color: #ffffffaf;
}
/*For all unorder-List*/
ul{
list-style-type: none;
}
/*=====================Top navigation-bar style=====================*/
body div{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
header{
position: sticky;
top: 0;
left: 0;
background-color: #252529;
overflow: hidden;
margin: 0;
box-shadow: 0 0 10px 0 #00000055;
z-index: 3;
}
.icon2{
visibility: hidden;
position: absolute;
right: 0;
}
span, .icon {
vertical-align: middle;
}
.icon:hover{
opacity: 0.3;
}
#top-nav ul{
margin: 0;
}
#top-nav ul li{
float: left;
}
#top-nav ul li a{
display: inline-block;
font-weight: 650;
padding: 7px 13px;
transition: 0.5s;
}
#top-nav ul li a:hover:not(.icon){
background-color: var(--spotify-green);
color: #000;
}
/*=======================section style=======================*/
.section{
background-image: linear-gradient(230deg,rgba(0, 0, 0, 0.6),rgba(0,0,0, 0.8)),url('img1.jpg');/* linear-gradient(230deg,rgba(0, 0, 0, 0.6),rgba(0,0,0, 0.8)),url('testimg.jpg');*/
height: 100%;
text-align: center;
font-size:x-large;
padding: 180px 0;
}
.section p{
margin: 50px auto;
width: 74%;
}
/*================================================================*/
.product-descr{
background-color: #252529;
text-align: center;
font-size: larger;
display: flex;
flex-direction: column;
}
.product-descr p{
margin: 50px auto 15px auto;
width: 74%;
}
.btn{
display: block;
margin: 15px auto 15px auto;
width: fit-content;
padding: 15px 10px;
background-color: rgba(30, 215, 96,0.3);;
border: 1px solid #000;
border-radius: 5px;
font-size: large;
transition: 0.4s;
}
.btn:hover{
background-color: var(--spotify-green);
border: 1px solid black;
font-weight: bold;
color: #000;
}
img{
width: 53%;
margin: 28px auto;
}
/*=============================================================*/
/*section 3 style*/
<!DOCTYPE html>
<html lang="en-IND">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.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=Source+Sans+Pro&family=Inter:wght#300&family=Nunito:wght#300&family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title></title>
</head>
<body>
<header>
<nav id="top-nav">
<ul>
<li><a class="icon" href="index.html"><span class="material-icons">home</span></a></li>
<li class="nav-link">Home</li>
<li class="nav-link">MyTunes</li>
<li class="nav-link">Overview</li>
<li class="nav-link">Music</li>
<li class="nav-link">Video</li>
<li class="nav-link">Gift Cards</li>
</ul>
<ul>
<li class="icon2"><a class="icon" href="#"><span class="material-icons">menu</span></a></li></ul>
</nav>
</header>
<div class="section">
<h1>Let it <span>Rythm</span></h1>
<h3>Your music, movies, and TV shows take center stage.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.</p>
</div>
<div id="b1" class="section2 product-descr">
<span class="icon"></span>
<h2>Music</h2>
<h2>45 Million songs. Zero Ads</h2>
<p>Stream over 45 million songs, ad-free. Or download albums and tracks to listen to offline. All the music in your personal Rythm library — no matter where it came from — lives right alongside the Rythm Music catalog. Start your free three-month trial with no commitment, and cancel anytime.</p>
<div class="btn">Start Free Trial Now</div>
<caption>Rythm Music is available in myTunes, and for iOS and Android devices.</caption>
<img src="mockup1.png" alt="" width="750">
</div>
</body>
</html>
The header should be position:fixed instead of position: sticky
header{
position: fixed;
top: 0;
left: 0;
width: 100%; /*set width 100% for the entire header*/
background-color: #252529;
overflow: hidden;
margin: 0;
box-shadow: 0 0 10px 0 #00000055;
z-index: 3;
}
*{
box-sizing: border-box;
}
:root {
--primary-color: #b90415;
--primary-color-hover: #d3071b;
--secondary-color: #103063;
--secondary-color-hover: #143f85;
--light-color: #f4f4f4;
--spotify-green:rgba(30, 215, 96,0.9);
}
html,body{
font-family: 'Nunito',sans-serif;
width: 100%;
margin: 0;
height: 100%;
line-height: 1.9em;
color: var(--light-color);
scroll-behavior: smooth;
}
/*For all Links*/
a{
text-decoration: none;
color: #ffffffaf;
}
/*For all unorder-List*/
ul{
list-style-type: none;
}
/*=====================Top navigation-bar style=====================*/
body div{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #252529;
overflow: hidden;
margin: 0;
box-shadow: 0 0 10px 0 #00000055;
z-index: 3;
}
.icon2{
visibility: hidden;
position: absolute;
right: 0;
}
span, .icon {
vertical-align: middle;
}
.icon:hover{
opacity: 0.3;
}
#top-nav ul{
margin: 0;
}
#top-nav ul li{
float: left;
}
#top-nav ul li a{
display: inline-block;
font-weight: 650;
padding: 7px 13px;
transition: 0.5s;
}
#top-nav ul li a:hover:not(.icon){
background-color: var(--spotify-green);
color: #000;
}
/*=======================section style=======================*/
.section{
background-image: linear-gradient(230deg,rgba(0, 0, 0, 0.6),rgba(0,0,0, 0.8)),url('img1.jpg');/* linear-gradient(230deg,rgba(0, 0, 0, 0.6),rgba(0,0,0, 0.8)),url('testimg.jpg');*/
height: 100%;
text-align: center;
font-size:x-large;
padding: 180px 0;
}
.section p{
margin: 50px auto;
width: 74%;
}
/*================================================================*/
.product-descr{
background-color: #252529;
text-align: center;
font-size: larger;
display: flex;
flex-direction: column;
}
.product-descr p{
margin: 50px auto 15px auto;
width: 74%;
}
.btn{
display: block;
margin: 15px auto 15px auto;
width: fit-content;
padding: 15px 10px;
background-color: rgba(30, 215, 96,0.3);;
border: 1px solid #000;
border-radius: 5px;
font-size: large;
transition: 0.4s;
}
.btn:hover{
background-color: var(--spotify-green);
border: 1px solid black;
font-weight: bold;
color: #000;
}
img{
width: 53%;
margin: 28px auto;
}
/*=============================================================*/
/*section 3 style*/
<!DOCTYPE html>
<html lang="en-IND">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.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=Source+Sans+Pro&family=Inter:wght#300&family=Nunito:wght#300&family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title></title>
</head>
<body>
<header>
<nav id="top-nav">
<ul>
<li><a class="icon" href="index.html"><span class="material-icons">home</span></a></li>
<li class="nav-link">Home</li>
<li class="nav-link">MyTunes</li>
<li class="nav-link">Overview</li>
<li class="nav-link">Music</li>
<li class="nav-link">Video</li>
<li class="nav-link">Gift Cards</li>
</ul>
<ul>
<li class="icon2"><a class="icon" href="#"><span class="material-icons">menu</span></a></li></ul>
</nav>
</header>
<div class="section">
<h1>Let it <span>Rythm</span></h1>
<h3>Your music, movies, and TV shows take center stage.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.</p>
</div>
<div id="b1" class="section2 product-descr">
<span class="icon"></span>
<h2>Music</h2>
<h2>45 Million songs. Zero Ads</h2>
<p>Stream over 45 million songs, ad-free. Or download albums and tracks to listen to offline. All the music in your personal Rythm library — no matter where it came from — lives right alongside the Rythm Music catalog. Start your free three-month trial with no commitment, and cancel anytime.</p>
<div class="btn">Start Free Trial Now</div>
<caption>Rythm Music is available in myTunes, and for iOS and Android devices.</caption>
<img src="mockup1.png" alt="" width="750">
</div>
</body>
</html>
Related
My website is bigger than I wanted it. It created a scroll bar on the bottom to scroll left and right but I want it only as big as my screen, something went wrong while doing CSS.
* body {
margin: 0;
padding: 0;
font-family: Arial;
}
nav {
width: 100%;
height: 100px;
background: rgba(0, 0, 0, 0.6);
border-bottom: 1px solid #fff;
margin: 0;
padding: 10px 90px;
top: 0;
left: 0;
box-sizing: border-box;
position: fixed;
}
nav .logo {
padding: 22px 20px;
height: 80px;
float: left;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 80px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a:hover {
background: rgba(0, 0, 0, 0.7);
border-radius: 6px;
/* pri hoveri spraví z ostrého rámčeka okolo položky menu oblý */
}
section {
width: 100%;
height: 100vh;
background: url(background.jpg);
background-size: cover;
background-position: center;
}
.container {
width: 100%;
height: 100vh;
padding: 0 8%;
}
.container h1 {
text-align: center;
padding-top: 10%;
margin-bottom: 60px;
font-weight: 800;
position: relative;
}
.container h1::after {
content: '';
background: #303ef7;
width: 100px;
height: 5px;
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
}
.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* zoradí jednotlivé services vedla seba*/
grid-gap: 30px;
}
.service {
text-align: center;
padding: 25px 10px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
background: transparent;
transition: transform 0.5s, background 0.5s;
}
.service i {
font-size: 40px;
margin-bottom: 10px;
color: #303ef7;
}
.service h2 {
font-weight: 600;
margin-bottom: 8px;
}
.service:hover {
background: #303ef7;
color: #fff;
transform: scale(1.05);
}
.service:hover i {
color: #fff;
}
<html>
<head>
<title>WEBTERAZ Prvy Pokus</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/227b5da2e1.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">Webteraz.sk</div>
<ul>
<li>O nás</li>
<li>Portfólio</li>
<li>Kontakt</li>
</ul>
</nav>
<section></section>
<div class="container">
<h1>Our Services</h1>
<div class="row">
<div class="service">
<i class="fa-solid fa-code"></i>
<!--Ikona </> z font awesome -->
<h2>Web Design</h2>
<p> Lorem ipsum WEB DESIGN sit amet, consectetur adipisciring.</p>
</div>
<div class="service">
<i class="fa-solid fa-palette"></i>
<!--Ikona palety z font awesome -->
<h2>Logo pre firmu</h2>
<p> Lorem ipsum LOGO sit amet, consectetur adipisciring.</p>
</div>
<div class="service">
<i class="fa-solid fa-screwdriver-wrench"></i>
<!--Ikona kluča a šrobovaku z font awesome -->
<h2>Údržba vašej stránky</h2>
<p> Lorem ipsum ÚDRŽBA sit amet, consectetur adipisciring.</p>
</div>
</div>
</div>
</body>
<!--Video koniec na 3:34-->
</html>
Your issue here is that the container is 100% + 8% padding each side, so 116% of total screen width. That creates a scrollbar on the X axis.
To overcome this you've got two solutions:
add box-sizing: border-box to the .container. Read more about box-sizing here.
calculate the total width of the .container to be 100% - 16%, because padding takes 16%. You could use width: calc(100% - 16%) to do that.
I prefer the box-sizing solution myself. It's actually not a bad idea to put that into the * selector so it matches every element you create.
:root {
--clr-primary: #0F052F;
--clr-secondary: #43D9B8;
--clr-light: #EEEEEE;
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;
}
* {
margin: 0;
box-sizing: border-box;
background-color: #FFFFFF;
}
body {
font-family: 'Poppins', sans-serif;
}
.wrapper {
width: 1440px;
margin: 0 auto;
padding: 0 100px;
}
/* Header - Navigation */
.desktop-nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 1240px;
position: fixed;
z-index: 200;
top: 44px;
padding-right: 0;
}
.desktop-nav .menu-items {
display: flex;
list-style: none;
}
.desktop-nav .menu-items li {
margin: 0 27.5px;
}
.desktop-nav .menu-items li:nth-last-of-type(1) {
margin-right: 0;
}
.desktop-nav .menu-items li a {
text-decoration: none;
color: var(--clr-primary);
font-size: 16px;
font-weight: var(--fw-medium);
position: relative;
}
.desktop-nav .menu-items li a.active::after {
content: "";
position: absolute;
height: 3px;
width: 100%;
background-color: var(--clr-secondary);
left: 0;
bottom: -2px;
}
.desktop-nav .menu-items li a.btn {
color: white;
background-color: var(--clr-primary);
border-radius: 10px;
padding: 10px 23px;
}
/* BIA section */
.bia-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.bia-container .left h1 {
font-size: 80px;
font-weight: var(--fw-bold);
margin: 60px 190px 18px 105px;
}
.bia-container .left p {
font-size: 18px;
font-weight: var(--fw-regular);
margin: 18px 195px 57px 105px;
}
.bia-container .left a.btn {
text-decoration: none;
color: rgb(0, 0, 0);
border-radius: 10px;
padding: 10px 23px;
border: 1px solid #43D9B8;
margin: 0 0 0 105px;
}
.bia-container .right {
padding-right: 105px;
}
/* Background header */
.bia-bg {
position: absolute;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Fonts-->
<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:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<nav class="desktop-nav">
<div class="logo">
<a href="#">
<img src="Images/bia-logo.svg" alt="">
</div>
<ul class="menu-items">
<li>
Home
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Neem contact op
</li>
</ul>
</nav>
<!-- End of desktop navigation -->
<header class="bia-container">
<div class="left">
<h1>Make data work for you</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra
tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient
purus. Libero pharetra tortor.</p>
Neem contact op header
</div>
<div class="right">
<img src="Images/header-analytics.svg" alt="">
</div>
<img class="bia-bg" src="Images/header-background.svg" alt="">
<!-- End of header section -->
</header>
</div>
<script src="main.js"></script>
</body>
</html>
I have a problem. I have a background image that I want to display, however when I give the image a z-index of -1, it becomes invisible and isn't displayed in the background. Does anyone have an idea why this might be happening?
<div class="right">
<img src="Images/header-analytics.svg" alt="">
</div>
.bia-bg {
position: absolute;
z-index: -1;
}
The class and image I'm talking about is found on line 56 (HTML) and the class and image is on line 117 (CSS).
For your reference, the code can be found here: JSFiddle.
Any help would be much appreciated!
What it's supposed to look like:
Design
To put a background on a div or other element you only need to use this on CSS:
background-image: url("./your_image.png");
Getting like this
html
<div class="bg_img">
<!-- something -->
</div>
css
.bg_img{
background-image: url("Images/header-analytics.svg");
}
You have given absolutely everything a default white background.
This means that something with z index -1 cannot be seen at all because elements with default 0 z index cover it in white.
Try removing that blanket setting.
The problem is max-width(tm-section img ) is not scaling according to the browser. And before that I wanna ensure that it is not my browser problem as I had checked working of same with different code and its working.
the image is not changing according to the browser.
*{
margin: 0;
padding: 0;
}
body{
background:#ffd633;
background-color: pink;
}
.tm-header{
background: #80ffd4;
padding-bottom: 2px;
}
.tm-main{
width: 1200px;
margin: auto;
}
.tm-main::after{
content: " ";
display: block;
clear: both;
}
.tm-main img{
float: left;
display: block;
}
.tm-main .tm-nav{
float: right;
margin-right: 20px;
}
.tm-main .tm-nav ul li{
display: inline-block;
vertical-align: center;
}
.tm-main .tm-nav ul li a{
color: black;
font-family: 'Ubuntu', sans-serif;
text-decoration: none;
text-transform: capitalize;
padding-left: 5px;
padding-right: 15px;
text-align: center;
line-height: 74.5px;
}
.tm-main .tm-nav ul li a:hover{
color: brown;
}
.tm-section img{
max-width: 100%;
}
.tm-section{
overflow: hidden;
}
.tm-content{
font-family: 'IM Fell Great Primer SC', serif;
font-size: 35px;
width: 1500px;
}
h1,h2,h3{
padding-bottom: 15px;
padding-top: 15px;
}
p{
padding-bottom: 20px;
padding-top: 15px;
}
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC&display=swap" rel="stylesheet">
</head>
<body>
<header class="tm-header">
<div class="tm-main">
<img src="logo.png" width="50px" height="auto">
<nav class="tm-nav">
<ul>
<li>home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<div class="tm-main tm-content">
<section class="tm-section">
<img src="msd.png" alt="" width="100%" height="600px" style="">
</section>
<article>
<h1>This is something about me</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<h2>My Aim</h2>
<p></p>
<h2>conclude</h2>
<p>
</p>
</article>
</div>
</header>
</body>
</html>
If your container is tm-section then you can use the following and it will resize to its container:
tm-section img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
%: Defines the maximum width in percent of the containing block.
You should set width for .tm-section
EX:
.tm-section {
width: 800px;
}
.tm-section img {
max-width: 100%;
}
I added a footer in which it is not reaching the bottom of the page and is covering content from my website, here is a picture of this problem. the footer covers text from underneath the two images. Is there any way for the footer to always remain at the bottom; not covering any extra content added in the future.
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
*{
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#content {
min-height: 100%;
position: relative;
margin-bottom: 200px;
}
#main {
padding-bottom: 100px;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
#Header-1 {
font-family: 'Lobster', cursive;
font-size: 35px;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
.container {
margin: 0 auto;
background: #f9f9f9;
font-size: 24px;
object-fit: cover;
}
.parallax {
background: url('images/background-1.jpeg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px;
min-height: 400px;
z-index:-1;
}
p {
font-family: 'Karla', sans-serif;
margin: 2.5%;
padding:0;
}
.b1{
text-align: center;
}
.pic-1{
height:280px;
width:420px;
float: left;
padding-left: 100px;
}
.pic-2{
height:280px;
width:420px;
float: right;
padding-right: 100px;
}
/*----------footer------------*/
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
clear:both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div id="content">
<div id="main">
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="-1">
</div>
<div class="content">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.
</p>
</div>
</div>
<div class="profiles">
<p id="Header-1">Here are some of the members of Croydon Cycles:</p>
<div class="pic-1">
<img src="https://cdn.pixabay.com/photo/2017/08/09/10/08/saddle-2614038_960_720.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="pic-2">
<img src="https://cdn.pixabay.com/photo/2013/10/03/23/19/bike-190483_960_720.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
</div>
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
</html>
Have a look at the example below. I've added comments to the changes made
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
*{
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
/* Instead of a margin or bottom set nothing unless recuired. Better to use padding */
#content {
min-height: 100%;
position: relative;
}
#main {
padding-bottom: 100px;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
#Header-1 {
font-family: 'Lobster', cursive;
font-size: 35px;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
.container {
margin: 0 auto;
background: #f9f9f9;
font-size: 24px;
object-fit: cover;
}
.parallax {
background: url('images/background-1.jpeg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px;
min-height: 400px;
z-index:-1;
}
p {
font-family: 'Karla', sans-serif;
margin: 2.5%;
padding:0;
}
.b1{
text-align: center;
}
/* Remove hard coded height */
.pic-1{
width:420px;
float: left;
padding-left: 100px;
}
.pic-2{
width:420px;
float: right;
padding-right: 100px;
}
/*----------footer------------*/
/* Set to position relative and bottom 0 */
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear:both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div id="content">
<div id="main">
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="-1">
</div>
<div class="content">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.
</p>
</div>
</div>
<div class="profiles">
<p id="Header-1">Here are some of the members of Croydon Cycles:</p>
<div class="pic-1">
<img src="https://cdn.pixabay.com/photo/2017/08/09/10/08/saddle-2614038_960_720.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="pic-2">
<img src="https://cdn.pixabay.com/photo/2013/10/03/23/19/bike-190483_960_720.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
</div>
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
</html>
I am trying to set full screen autoplay background video. Here is the link where I got the video, https://pixabay.com/en/videos/saigon-landscape-vietnam-travel-14385/
It looks quite well on fullscreen however when I minimize the screen there comes the white space at the top? How can I avoid it? I wrote a media query in css
#media only screen and (max-width: 900px) {
video {
background-attachment:unset;
position:absolute;
margin-top: -500px !important;
}
}
I guess it is not a good idea to set margin top.
Here is my html and css code
body {
font-family: 'Poppins', sans-serif !important;
}
.w3-bar-item {
margin: 0;
padding: 40px 10px 5px 10px !important;
color: whitesmoke !important;
font-weight: 700;
}
.showcase h1 {
color: floralwhite;
font-family: 'Poppins', sans-serif !important;
margin: 0 auto;
margin-top: 300px;
font-size: 3rem;
font-weight: 500;
text-transform: uppercase;
}
.showcase p {
margin-top: 30px !important;
font-size: 1.2em;
color: whitesmoke;
max-width: 900px;
margin: 0 auto;
}
.showcase button:hover {
background: darkred !important;
opacity: 0.8 !important;
color: white !important;
}
.showcase {
margin-bottom: 50px !important;
}
#media only screen and (max-width: 900px) {
.showcase {
margin-bottom: 5px !important;
}
.showcase h1 {
margin-top: 200px;
}
}
.section {
padding: 10px;
}
.section img {
width: 100%;
}
.w3-tag {
margin: 6px 0 0 6px;
}
video {
background-attachment: fixed;
position: fixed;
background-size: cover;
top: 60%;
left: 50%;
margin-top: -50%;
margin-left: -50%;
z-index: -1;
max-height: 1000px;
opacity: 0.9;
}
button {
margin-top: 5px !important;
border-radius: 10px;
}
footer {
background-color: darkslategray;
color: white;
}
footer p {
margin: auto;
padding: 10px 0px 5 px 0px;
font-size: 1.2em;
font-weight: 500;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Website with W3 Css Framework</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" type="image/png" href="img/icon.PNG">
</head>
<body>
<!--Navigation-->
<div class="w3-bar">
<div class="w3-tag w3-xxlarge w3-red w3-round w3-mobile" style="padding:10px">
Website Logo
</div>
<span class="w3-right w3-xlarge">
Home
About
News
Downloads
</span>
</div>
<!--Showcase-->
<section class="showcase">
<div class="w3-container w3-center">
<h1>Slogan goes here!</h1>
<p class="w3-animate-opacity w3-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur inventore sequi rem quisquam sint adipisci dolorem at dignissimos.</p>
<button class="w3-button w3-red w3-large w3-opacity-min" onclick="document.getElementById('form').style.display='block'">Learn More Now</button>
<video id="myVideo" src="video/saigon.mp4" type="video/mp4" muted autoplay loop></video>
</div>
</section>
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
Why not simply doing it like this:
video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
min-height: 100%;
min-width: 100%;
}
Your background rules do not apply to video.