I am using fullpage.js with background images but the issue is they are not resizing automatically on page load. They only resize to cover the background when you scale the browser, onload they look very large, cropped and pinned to the upper top. Has anyone had this issue? I am using Chrome.
<div id="fullpage">
<div class="section " id="section0">
<div id="mainTourNav" class="container">
<ul>
<li id="tourNav1"> </li>
<li id="tourNav2" class="tourNav"> Slide 1</li>
<li id="tourNav3" class="tourNav"> Slide 2 </li>
<li id="tourNav4" class="tourNav"> Slide 3 </li>
</ul>
</div>
</div>
<div class="section" id="section1">
<h1>It’s about Friends and Family. . .</h1>
<div class="section" id="section2">
<h1>It's about design. . .</h1>
</div>
<div class="section" id="section3">
<h1>It’s about the game you love. . .</h1>
</div>
</div>
The CSS
/* Backgrounds will cover all the section
* --------------------------------------- */
#section0,
#section1,
#section2,
#section3{
background-size: cover;
}
/* Defining each section background and styles
* --------------------------------------- */
#section0{
background-image: url(../img/Res-BG.jpg);
padding: 15% 0 0 0;
}
#section1{
background-image: url(../img/bg4.jpg);
padding: 10% 4% 0 4%;
}
#section2{
background-image: url(../img/bg3.jpg);
padding: 10% 4% 0 4%;
}
#section3{
background-image: url(../img/bg2.jpg);
padding: 10% 4% 0 4%;
}
#section0 h1{
color: black;
font-size: 40px;
font-style: italic;
opacity: 0;
}
#section{
background-image: url('http://www.fhdwallpapers.com/upload/2013/04/13/20130413064705-280c35c7.jpg');
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
Got it solved. Basically I chaged:
#section0,
#section1,
#section2,
#section3{
background:cover;
}
to
#section0,
#section1,
#section2,
#section3{
width:100%;
height:100%;
background-size:100% auto;
background-repeat: no-repeat;
}
Add Follwing attributes to section3
#section3{
width:100%;
height:100%;
background-size:100% auto;
background-repeat: no-repeat;
}
Related
I followed the answer from this question and changed it slightly so that this would work on a container that should be scrolled through horizontally. The goal is to add linear-gradient to the edges of the container and make the gradients stay on the edge while the container is being scrolled through. When the user is on the far left of the container, the left shadow should not be visible, same for the right side. So when the user is in the middle, both shadows should be visible.
I used the same code from one of the examples at the bottom of the answer and added it to the ::after pseudoelement of the container. I used linear-gradients for all of the shadows and just changed background-attachment: local to scroll for the second set of gradients.
However, when I tried to scroll through it did not have the same effect horizontally. When the container is scrolled through, the gradients stay fixed in the same position, and only the red gradients are shown.
How do I fix this?
const boxesView = document.querySelector('.boxes')
const boxes = document.querySelectorAll('.box')
// btns
const forwardBtn = document.querySelector('#forwards')
const backBtn = document.querySelector('#backwards')
boxSize = boxes[0].clientWidth
forwardBtn.addEventListener('click', () => {
boxesView.scrollBy(boxSize, 0)
})
backBtn.addEventListener('click', () => {
boxesView.scrollBy(-boxSize, 0)
})
.boxes-container {
margin-top: 2rem;
width: 100%;
position: relative;
}
.boxes {
display: flex;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
position: relative;
}
.boxes::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background:
linear-gradient(90deg, red 30%, white) left/100px 100% no-repeat local,
linear-gradient(90deg, white, red 70%) right/100px 100% no-repeat local,
linear-gradient(90deg, blue 30%, white) left/80px 100% no-repeat scroll,
linear-gradient(90deg, white, blue 70%) right/80px 100% no-repeat scroll;
/* Shadows */
background-attachment: local local scroll scroll;
}
.boxes::-webkit-scrollbar {
display: none;
}
.boxes .box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
width: 332px;
max-width: 332px;
cursor: pointer;
margin-right: 2rem;
}
.boxes .box#last-box {
padding-right: 2rem;
}
.boxes .box .img-container img {
width: 322px;
max-width: 322px;
height: 200px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 10px;
}
.boxes .box h6 {
font-size: 18px;
}
.boxes .box p {
font-size: 14.5px;
font-weight: lighter;
letter-spacing: 0.1px;
}
<button id="backwards">Back</button>
<button id="forwards">Forwards</button>
<div class="boxes-container">
<div class="boxes">
<!-- box 1 -->
<div class="box">
<div class="img-container">
<img src="https://a0.muscache.com/pictures/b6005f78-45e6-403a-bc1d-3351ae83d149.jpg" alt="">
</div>
<h6>Why host on Airbnb?</h6>
<p>Hosts reveal what they love about sharing their space on Airbnb.</p>
</div>
<!-- box 2 -->
<div class="box">
<div class="img-container">
<img src="https://a0.muscache.com/pictures/9ac19f4a-a59c-47f9-8223-09120b52cd2d.jpg" alt="">
</div>
<h6>How to get started on Airbnb</h6>
<p>From creating your listing to prepping your space, learn how to start hosting.</p>
</div>
<!-- box 3 -->
<div class="box">
<div class="img-container">
<img src="https://a0.muscache.com/pictures/4d0cc0ed-ad85-4efd-b98e-386d22ab195a.jpg" alt="">
</div>
<h6>How to earn money on Airbnb</h6>
<p>Here's what every Host needs to know about pricing and payouts.</p>
</div>
<!-- box 4 -->
<div class="box">
<div class="img-container">
<img src="https://a0.muscache.com/pictures/4efaca33-ca90-4d94-a79b-381cf0179355.jpg" alt="">
</div>
<h6>Designing your space</h6>
<p>Designing your space for guests can be a quick way to boost your bookings.</p>
</div>
<!-- box 5 -->
<div class="box" id="last-box">
<div class="img-container">
<img src="https://a0.muscache.com/pictures/3cea79b0-79c3-4604-8fd9-7ef5cee4aa42.jpg" alt="">
</div>
<h6>Secrets from a seasoned Superhost</h6>
<p>Superhost Nikki shares her tips, from setting up to standing out.</p>
</div>
</div>
</div>
I'm trying to set up a menu but the div that toggles the menu isn't showing up
I'm trying to follow a tutorial where a guy sets up a menu, and he has a div in the top left with a menu icon. I've followed the code perfectly word for word in the html and css, and yet nothing appears on my screen. I do have the exact same image in the exact same folder that he does.
Link to YT HTML
& the
Link to YT CSS
.btn-toggle-nav {
width: 60px;
height: 100%;
background-color: #F98F39;
background-image: url("img/menu.png");
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
cursor: pointer;
}
.btn-toggle-nav:hover {
opacity: 0.5;
}
<nav class="nav-main">
<div class="btn-toggle-nav"></div>
<ul>
<li>Home</li>
<li>Project</li>
<li>Biography</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
The expected result should be like he has in the video.
Link to that
Try this. Add height in pixels.
.btn-toggle-nav {
width: 60px;
height: 46px;
background-color: #F98F39;
background-image: url(img/menu.png);
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
cursor: pointer;
display: inline-block;
}
ul {
display: inline-block;
}
.btn-toggle-nav:hover {
opacity: 0.5;
}
<nav class="nav-main">
<div class="btn-toggle-nav"></div>
<ul>
<li>Home</li>
<li>Project</li>
<li>Biography</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
My "home" button goes up into the div as I condense the page. What is the best way to stabilize the button so that it will stay in center of the div as the page is condensed? I've tried many different things and so far nothing has worked so I'm hoping someone on this site could help me answer this problem. I've tried many different things without success.
JS/CSS/HTML
$(document).ready(function () {
//mouseenter overlay
$('ul#gallery li').on('mouseenter', function () {
// Get data attribute values
var title = $(this).children().data('title');
var desc = $(this).children().data('desc');
//validation
if (desc == null) {
desc = 'Click To Enlarge';
}
if (title == null) {
title = '';
}
//Create overlay div
$(this).append('<div class="overlay"></div>');
//Get the overlay div
var overlay = $(this).children('.overlay');
// Add html to overlay
overlay.html('<h3>' + title + '</h3><p>' + desc + '</p>');
// Fade in overlay
overlay.fadeIn(400);
});
$('ul#gallery li').on('mouseleave', function () {
//Create overlay div
$(this).append('<div class="overlay"></div>');
//Get the overlay div
var overlay = $(this).children('.overlay');
//Fade out overlay
overlay.fadeOut(200);
});
});
body{
background-color: white;
font-family:Orbitron;
color:white;
width:100%
}
.fa-stack-overflow{
color: #f48024
}
.fa-github{
color:rgb(102,43,129);
}
.fa-linkedin{
color:rgb(0,127,178);
}
.fa-facebook-official{
color:rgb(59, 89, 153);
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
color:white;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: white;
color:#337ab7;
background-repeat:no-repeat;
background-size: cover;
height: 400px;
padding-top: 5%;
border-bottom:#00bfff 3px solid;
border-top:#00bfff 3px solid;
background-attachment: fixed;
}
.boxed{
font-size: 1.7em;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-bottom: 100px;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 800px;
padding-top:6%;
background-attachment: fixed;
}
.button{
background-size: contain;
}
.container{
width:80%;
margin:auto;
overflow:auto;
}
section{
padding:20px 0;
overflow:hidden;
padding-bottom: 5%;
margin-top: 2.5%;
}
#gallery{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#gallery li{
display: block;
float: left;
width: 23%;
cursor: pointer;
border: 5px;
box-sizing: border-box;
margin: 0 12px 7px 0;
position: relative;
}
#gallery img{
width:100%;
border-radius:5%
}
.overlay{
display:none;
background:#337ab7 url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) no-repeat top center;
color:#fff;
position:absolute;
top:0;
z-index:100;
width:100%;
height:100%;
padding:20px;
border-radius:5%;
box-sizing: border-box;
pointer-events: none;
opacity: .7;
}
.overlay h3{
margin: 0;
padding: 0;
}
.pageThreeFooter{
background: black;
color:#337ab7;
background-repeat: none;
background-size: cover;
height: 150px;
padding-top: 2.5%;
background-attachment: fixed;
}
.pageFour{
background: white;
color:#337ab7;
background-repeat: none;
background-size: cover;
height: 300px;
padding-top: 2.5%;
}
.black{
color:black;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center" id="p1">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Web Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>Stack Overflow</a>
<a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a>
<a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a>
<a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a>
</div>
</div>
<div class= "pageTwo text-center" id="p2">
<h2>Daniel Collins</h2>
<div class="boxed">
<p class="black">
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (MySQL, PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
<div class= "pageThree" id="p3">
<header>
<div class="block text-center">
<h1 class = "logo">Portfolio</h1>
</div>
</header>
<section>
<div class="container">
<h1 id="heading">Projects</h1>
<ul id="gallery">
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
</ul>
</div>
</div>
</section>
<div class="pageThreeFooter text-center">
<div class="row">
Home
</div>
</div>
<div class= "pageFour text-center" id="p4">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="primary">
<p class="black">Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x sr-contact"></i>
<p class="black">555-5555</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x sr-contact"></i>
<p class="black"><a class="black" href="mailto:casteyestothesun#gmail.com">myemail.com</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
You are missing the important responsive meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
But you are using Bootstrap, which is a responsive framework. So, the answer to your question is to study and understand Bootstrap, along with more general studying of what it means for a site to be responsive.
There is a lot more to making a website responsive than just changing one or two things. You really need to plan on how each element or container of those elements is going to be responsive in their own right. Also, how your wrap or container of all content will behave as well as how your images, text/font, etc... will also be responsive.
This is too broad a question to be answered simply.
Since you are already using bootstrap, I would research how to utilize this to it's full potential and you can easily make your website responsive.
As you guessed, media queries are a good way to do this.
You'll need to add this tag in your header for these to work:
<meta name="viewport" content="width=device-width, initial-scale=1">
There are two ways you can go about setting your breakpoints - by min width or max width.
Since you've already written most of the styles, min-width probably makes more sense. If you have multiple breakpoints you can combine min-width and max-width into a single query to avoid conflicts with other media queries.
As for the home button, I recommend looking up how to vertically center an element. This guide is pretty handy: https://css-tricks.com/centering-css-complete-guide/
Hi I was using a Scrollr jquery plugin made by Alexander Prinzhorn to make a parallax effect. I made a parallax effect happen on full screen, but when I wanted it to happen on a specific div, it doesn't work. The original tutorial is made by Petr Tichy. I hope You can help me out here.
This is the code
css file
.con{
width: 500px;
height: 500px;
overflow: auto;
margin: 40px; background-color: #b3b3b3;
}
body{
padding: 0;
margin: 0;
background-color: #a3a3a3;
}
section{
height: 400px;
}
#slide-1 .bcg{
display: block;
}
#slide-2 .bcg{
display: block;
}
.bcg{
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 500px;
width: 500px;
}
These are script files I included.
<script src="path to jquery/jquery-1.9.1.min.js"></script>
<script src="path to scrollr js /skrollr.js"></script>
<script>
//initialize the scrollr function
$(document).ready( function(){
var s = skrollr.init({
forceHeight: false });
});
</script>
html file
<div class="con">
<section id="slide-1">
<div class="bcg" style="background-image: url('img1.jpg')"
data-center-top="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-anchor-target="#slide-1"
data-emit-events>
</div>
</section>
<section id="slide-2">
<div class="bcg" style="background-image: url('img2.jpg')"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-2"
data-emit-events>
</div>
</section>
</div>
i have a refference like this
http://reverzo.tymberry.com/
my code is like this
<div id="multiscroll">
<div class="ms-left">
<div id="home-left" class="ms-section slide-item full-width full-height fullscreen">
<!-- <div class="container"> -->
<p style="font-size:10em;">Lorem ipsum.</p>
<!-- </div> -->
</div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
<div class="ms-right">
<div id="home-right" class="ms-section"></div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
</div>
#home-left{
background-image: url(http://www.reverzo.tymberry.com/wp-content/uploads/2014/08/furgona-home.jpg);
}
.slide-item.fullscreen {
width: 200% !important;
}
.slide-item.full-height {
height: 100%;
}
.slide-item.full-width {
/*width: 100%;*/
position: relative;
overflow: hidden;
}
.slide-item {
display: block;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
background-origin: border-box;
background-repeat: no-repeat;
}
#home-right{
background: transparent;
}
heres my work
https://jsfiddle.net/ob1k3vut/
i wanna set the home image like that. its full screen. but when i scroll. the bakground didnt split. how to do that. it can make it full screen. but when scoling they still stick together.
i cant make the fiddle because i dont know the url of js and css of multi-scroll. so sorry guys. if you gus know the link off online css and js multiscroll, feel free to tell me. ill create it so u can check it