I have a big "img" background image that is put inside the "Figure" tag as the main background of the site. I set the max-width to 100% and the height to 100% too.
When I start scrolling from the top of my page to the bottom.
As soon as I reach the beginning/top of an image, the scroll stops, then I need to scroll again to reach the bottom of the page. Same as when I scroll from bottom to up. This problem is happening on the touchpad scroll and the keyboard up and down arrows.
I noticed that whether scrolling from top to bottom or bottom to up of the image, the vertical scroll bar doesn't move; it starts moving when I have to scroll again up or down of the site.
However, the following steps are done.
The scrolling worked smoothly when I reduced the "Height" of the img exactly below "86%" in the CSS file. However, "86% - 100%" the problem starts there.
I tried to use the "img" tag, then I replaced it with the "Background-Image: url()" property. Same problem with step one.
I tried to reduce (compress) the image size. Same problem with step one.
I used the "Background-size" with the different values (contain, cover, auto). Same problem with step one.
I used "Background-Attachment: Scroll;" the Same problem as step one.
Updated: I added "P" with a lot of lorem text under the image so that I can scroll enough. The scrolling problem was solved even though the height of the image is "Height: 100%", whether it's "img tag" or "Background-Image: url()"
Thus, the main problem is with the height, but I need the image to be "100%" not below "86%".
Any suggestions, please?
<body>
--Hidden Content--
<!------------------
----MAIN CONTENT----
-------------------->
<main>
<section class="upperpart">
<header class="main_header">
<div class="getoff">
<h2>get rm10 off</h2>
<p>your first order
<span>code:shemya</span>
</p>
</div>
<div class="share">
<h2>share & earn</h2>
<p>up to 15% off</p>
</div>
<div>
<h2>cash on delivery</h2>
</div>
</header>
<figure class="main_figure">
<img src="https://www.lux-review.com/wp-
content/uploads/2022/05/Kids-Fashion.jpg" alt=""
height="85%">
<figcaption></figcaption>
<img src="" alt="">
<div class="figure_ads">
<p>mega year end sale now on</p>
<p>up to <span>80%</span>off</p>
<button>buy now</button>
</div>
</figure>
<section class="middelpart">
--Hidden Content--
</section>
<section class="bottompart">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Reprehenderit fugit earum accusantium non
amet
.</p>
</section>
</main>
main {
width: 100vw;
min-height: 100vh;
margin-top: 15.2rem;
}
main .upperpart {
background-color: antiquewhite;
height: 80rem;
width: 90vw;
margin: 0 auto;
/* visibility: hidden; */
}
.upperpart .main_figure {
width: 90vw;
/* max-height: 60rem; */
position: relative;
}
.upperpart .main_figure img {
max-width: 100%;
height: 100%;
}
main .bottompart p {
font-size: 2rem;
margin-top: 5rem;
}
I tried to reproduce your problem, I don't really see where is the problem.
The only thing I've found is the section upperpart is not close before the main closure.
main {
width: 100vw;
min-height: 100vh;
margin-top: 15.2rem;
}
main .upperpart {
background-color: antiquewhite;
height: 80rem;
width: 90vw;
margin: 0 auto;
/* visibility: hidden; */
}
.upperpart .main_figure {
width: 90vw;
/* max-height: 60rem; */
position: relative;
}
.upperpart .main_figure img {
max-width: 100%;
height: 100%;
}
main .bottompart p {
font-size: 2rem;
margin-top: 5rem;
}
<main>
<section class="upperpart">
<header class="main_header">
<div class="getoff">
<h2>get rm10 off</h2>
<p>your first order
<span>code:shemya</span>
</p>
</div>
<div class="share">
<h2>share & earn</h2>
<p>up to 15% off</p>
</div>
<div>
<h2>cash on delivery</h2>
</div>
</header>
<figure class="main_figure">
<img src="https://www.lux-review.com/wp-content/uploads/2022/05/Kids-Fashion.jpg" alt="" height="85%">
<figcaption></figcaption>
<img src="" alt="">
<div class="figure_ads">
<p>mega year end sale now on</p>
<p>up to <span>80%</span>off</p>
<button>buy now</button>
</div>
</figure>
<section class="middelpart">
--Hidden Content--
</section>
<section class="bottompart">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
</section>
</section>
</main>
I don't have scrolling trouble on this snippet. Do you have?
Related
I have tried every solution I could find on the web on this subject. I have come to the conclusion that the problem may be that my page contains a scroll-snap-type.
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
This is an overview of the div that I would like to scroll horizontally.
<section id="work">
<h2>WORK</h2>
<div id="carrousel">
<div class==="carr"><img src="./medias/projet1.png" alt="">
<h3>Lorem Ipsum</h3>
<h4>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit rerum voluptas iusto ipsam officiis
earum atque unde nesciunt provident ullam rem ea tempore.</h4>
</div>
<div class="carr"><img src="./medias/projet1.png" alt="">
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum<h4>
</div>
<div class="carr"><img src="./medias/projet1.png" alt="">
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum</h4>
</div>
<div class="carr"><img src="./medias/projet1.png" alt="">
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum</h4>
</div>
</div>
</section>
#carrousel {
display: flex;
flex-direction: row;
height: 70vh;
width: 100vw;
}
#work {
background-color: #0F0F0F;
color: white;
display: flex;
flex-flow: column;
justify-content: center;
}
If I understand you correctly, to fix your issue, you can simply in your CSS (stylesheet) type the following code:
#carrouse1 {
overflow-x: auto;
}
...and do the same thing if you have more than one
If you want to make another section be horizontally scrolled, then just use the same CSS property on that too!
I have an assessment from my professor and i need to create a website the same way my professor made it. i am almost done but the last thing that i couldnt figure out how to do is the boxed review from my professor i tried it but it was not as i hoped to be . everything is working fine only the boxed review doesnt work and i dont know how to fix it. Can someone help me please?
my code:
<!--
Assignment 12 (HTML Semantics ();
-->
<!-- Make changes to the code below -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Assignment-12</title>
<style>
.boxed {
width: 500px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="boxed">
<aside><p></p></aside>
<h2>Reviews</h2>
<article>
<h3>Would not recommend</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto,
accusantium!
</p>
<p><small>1/5 stars</small></p>
</article>
<article>
<h3>These cats are crazy</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod,
aspernatur!
</p>
<p><small>2/5</small></p>
</article>
<article>
<h3>Awful service</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, neque!
</p>
<p><small>1/5</small></p>
</article>
</div>
<header>
<nav>
<ul>
<li>
Home
<ul>
<li>Food</li>
<li>Toys</li>
</ul>
</li>
<li>Dogs</li>
<li>
Cats
<ul>
<li>Food</li>
<li>Toys</li>
<li>Adopt</li>
</ul>
</li>
<li>Birds</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to the petstore</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
laborum ipsa sint reprehenderit amet expedita architecto itaque
consequuntur quas laudantium?
</p>
</main>
<hr />
<nav>
<ul>
<li>Home</li>
<li>Cats</li>
<li>Adopt</li>
</ul>
</nav>
<h2>Cat Adoption</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error beatae at
tenetur quo, non ratione nulla! Voluptates repudiandae ab hic.
</p>
<img src="/images/cats.png" alt="Images of Cats" />
<p>
Doordeweeks voor 22:00 besteld, morgen in huis. Weekend besteld, maandag
in huis.
</p>
</body>
</html>
I made a few changes on the style.
For better uses, you can look here
<style>
.boxed {
width: 500px;
height: 100px;
border: 1px solid #000;
z-index: 100;
background-color: white;
position: absolute;
top: 0%;
right: 40%;
}
</style>
Also, the div you give boxes class does not include all the elements and it provides a better view if you fix it.
I know a solution to create equal height columns using display:table like:
.row {
display: table;
width: 100%;
}
.col{
display: table-cell;
}
but my case is a bit different, since I am using flexbox and row class has display:flex:
.row {
display: flex;
display: ms-flex;
flex-wrap: wrap;
}
and all cols have .large-4 class:
.large-4 {
width: 25%;
max-width: 25%;
flex: 0 0 30%;
}
I can't use flex:1 for .large-4 as well because it varies in different viewport.
here is a snippet of html:
<div class="row">
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste
distinctio
optio vel aliquam provident, ipsa reprehenderit in corrupti quia ratione quisquam amet veniam totam
veritatis.
</p>
</div>
</div>
</div>
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-0">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>
</div>
</div>
</div>
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste
distinctio.
</p>
</div>
</div>
</div>
</div>
code-pen link can be found here! how to I acheive equal height columns using flexbox? or any other better solution. thanks
You need to add display: flex to the .large-4 element:
.large-4 {
width: 25%;
max-width: 25%;
flex: 0 0 30%;
display: flex;
}
You'll notice when you inspect your elements using the inspector tool, large-4 elements are actually all the same height. It's the content inside that is not. So by making the parent element flex, it will make the children elements fill the space.
You already have equal-height columns, but inside them is a container that is contracting to its content. Expand that container.
.card {
height: 100%;
}
I have added a margin to the .quotes-text selector however it moves the whole quotes section down not just the text within the quotes section. Any idea what might be causing this? Code below.
.quotes {
height: 344px;
background: #bf4b54;
}
.quote-text {
font-size: 2rem;
max-width: 860px;
}
<div class="quotes">
<div class="quote-text">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque soluta necessitatibus a autem obcaecati officiis reiciendis. - Head Chef</span>
</div>
<img src="" alt="" class="chef">
</div>
If you just want the text to move down (but not the section) use padding instead of margin.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I wanted to replicate the effects as shown here -
https://allods.my.com/en/news (not this one, sorry)
http://bit.do/b2692
https://www.google.co.in/sheets/about
Ignoring all the animations, i wanted to know how can we implement multiple different backgrounds as one scrolls down the page.
PS. I am a complete beginner, i prefer to have an HTML/CSS solution only.
You should try to add position fixed property to Your background , it should help.
body,
html,
main {
/* important */
height: 100%;
}
.fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg.bg-1 {
background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
min-height: 100%;
}
<main>
<div class="fixed-bg bg-1">
<h1><!-- title goes here--></h1>
</div>
<div class="scrolling-bg cd-color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-2">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-3">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-4">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
</main>
Div after div approach :
body,
html,
main {
/* important */
height: 100%;
padding:0;
margin:0;
}
.container{
position:absolute;
}
.fixed-bg {
min-height: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg.bg-1 {
background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
min-height: 100%;
}
<main>
<div class="fixed-bg bg-1">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-2">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-3">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-4">
<div class="container"><!-- content goes here--></div>
</div>
</main>
So you are looking for a parallax effect, there is a number of plugins for that. I recently used http://pixelcog.github.io/parallax.js/ which worked out well for me.
It's very simple to use it. You said you want an HTML / css solution for this, but i don't think you can do it without javascript. If someone else knows the alternative without javascript i'd like to see it also. But even if you don't know much about javascript you can use this plugin, just follow the instructions on the link i provided.
The plugin requires jquery to work!