I’ve just started to learn HTML/CSS. My goal is to prepare a parallax effect on my test website. I constructed a code with parallax effect in CSS, but the problem is that the images located under the container is unsmooth during scrolling the page (the image extends and rips).
Please consider that I used border-radius method which rounds corners of the containers under which an images are located. I noted that when I cut border-radius method then the unsmoothing effect doesn’t occur. But my goal is to leave this border-radius method unchanged
I know that I can construct similar parallax effect in JS, but my goal is to understand reason why parallax effect doesn’t work correctly in CSS together with border-radius method.
I focused that the unwanted effect occurs only in the case when the browser page is narrowed. Please see the differences between the effect in Codepen one with code (part of the browser page in which finishing page is showed is narrowed):
https://codepen.io/marartgithub/pen/vYpPEjQ
and second one in full page (the problem doesn’t occur):
https://codepen.io/marartgithub/full/vYpPEjQ
I'm sorry if the problem is not the biggest one and for some of you could be insignificant, but my goal is to understand why not all which I wanted works fine to be better programmer.
I would use a :before pseudo tag to achieve this effect. Here are the changes I made:
I remove the about bg div and set each box to flexbox as that will be a cleaner way to acheive this layout.
Then, I removed the border-radius from .about-us-box and added it to .about-us-box:before. In the :before styling, I set it the size of the parent container (.about-us-box) and then set it to have a border radius. You will see box-shadow attribute as border-radius doesn't curve the inside corner. Box-shadow takes care of that for us.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
/* n a v */
.nav {
height: 50px;
background-color: #333;
text-align: center;
line-height: 50px;
font-size: 0;
}
.nav-item {
display: inline-block;
}
.nav-item a {
padding: 0 50px;
color: whitesmoke;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s;
font-size: 16px;
}
.nav-item a:hover {
color: royalblue;
}
/* h e a d e r */
.header-jpg {
position: relative;
height: 300px;
background-image: url('https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_1280.jpg');
background-size: cover;
background-position: 0 50%;
}
.header-text {
position: absolute;
color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-bg {
position: absolute;
height: 100%;
width: 100%;
}
.header-text h1 {
direction: rtl;
margin-bottom: 10px;
text-transform: lowercase;
letter-spacing: 2px;
text-shadow: 2px 2px 6px gold;
}
/* m a i n */
main {
margin: 50px auto;
width: 1200px;
}
main h2 {
margin-bottom: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-size: 16px;
}
.about-us-box {
position: relative;
height: 300px;
margin: 40px 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
z-index: 0;
}
.about-us-box:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 20px 0;
z-inex: 1;
background-color: transparent;
border-radius: 20px 0 20px 0;
box-shadow: 0 0 0 13px #fff;
}
.top {
background-image: url('https://cdn.pixabay.com/photo/2017/08/06/07/10/coffee-2589761_1280.jpg');
}
.middle {
background-image: url('https://cdn.pixabay.com/photo/2017/06/10/16/19/iphone-2390121_1280.jpg');
}
.bottom {
background-image: url('https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg');
}
.about-us-text {
text-align: center;
color: whitesmoke;
padding: 2rem 1rem;
background-color: black;
}
.about-us-text h3 {
margin-bottom: 10px;
text-transform: uppercase;
}
/* f o o t e r */
footer {
height: 80px;
line-height: 80px;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 20px;
}
.icon-box {
margin-left: 20px;
}
.icon-box a {
margin: 0 5px;
color: #ddd;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}
.icon-box a:hover {
color: royalblue;
}
.ti {
padding-right: 10px;
font-size: 26px;
margin-right: 10px;
}
.elem-main {
width: 300px;
margin: 0 auto;
}
.prices-table {
margin: 0 auto;
}
.prices-table td {
padding: 10px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TASK - WE LOVE COFFEE</title>
<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=Raleway&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css" />
<link rel="stylesheet" href="./css/style_en.css" />
</head>
<body>
<header>
<div class="header-jpg">
<div class="header-bg"></div>
<div class="header-text">
<h1>Creative design</h1>
<p>With our support you will create a dreamlike website</p>
</div>
</div>
</header>
<nav class="nav">
<ul>
<li class="nav-item">home</li>
<li class="nav-item">services</li>
<li class="nav-item">pricing</li>
<li class="nav-item">contact</li>
</ul>
</nav>
<main>
<h2>About us</h2>
<div class="about-us-box top">
<div class="about-us-text">
<h3>We love coffee</h3>
<p>
We interested in coffe in our team on years. We love his smell and
taste. We love the process on which coffee beans goes through
starting from day of cutting during harvest then heat treatment to
grinding process in our coffee grinder and passing it through a
espresso machine.
</p>
</div>
</div>
<div class="about-us-box middle">
<div class="about-us-text">
<h3>We all are creative</h3>
<p>
Characteristic of our work requires from us to be continously a
creative persons, because of competentive market and our clients
demands which expects from us to provide unconventional solutions
supported theri business.
</p>
</div>
</div>
<div class="about-us-box bottom">
<div class="about-us-text">
<h3>We like our job</h3>
<p>
We are young team of simmilar thingking and creative and full
positive energy persons. We meets as well outside of our job to
receive a good balance between proffesionall acvivity and private
life.
</p>
</div>
</div>
</main>
<footer>
<p>
© 2022 Creative design
<span class="icon-box">
<i class="ti ti-brand-facebook"></i>
<i class="ti ti-brand-twitter"></i>
</span>
</p>
</footer>
</body>
</html>
I am helping a student with a project and we are going through a tutorial. The tutorial is here:
https://ihatetomatoes.net/demos/parallax-scroll-effect/
Here is our index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>joeys school project</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<body>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide-1">
<div class="hsContainer">
<div class="hsContent" data-center="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#slide-1 h2">
<h2>Mac Vs. Windows</h2>
<p>Which is better? Which should you choose?</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Here is our main.css:
body {
margin: 0;
}
.mac_header {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
/* CSS */
.hsContainer {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
opacity: 0;
}
.hsContent {
max-width: 450px;
margin: -150px auto 0 auto;
display: table-cell;
vertical-align: middle;
color: #ebebeb;
padding: 0 8%;
text-align: center;
}
.hsContent h2,
.copy h2 {
color: #ffffff;
font-size: 45px;
line-height: 48px;
margin-bottom: 12px;
}
.hsContent p {
width: 400px;
margin: 0 auto;
color: #b2b2b2;
}
.hsContent a {
color: #b2b2b2;
text-decoration: underline;
}
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
/* Slide 1 */
#slide-1 .bcg {
background-image:url('../img/computers-1227142.jpg');
height: 733px;}
The issue is we can see the block for the text when we inspect the page in Chrome, but it is not displaying the text over the image. All we see is the outline of the div where it is located. We have researched how to get this working and also followed the tutorial correctly. Also we have compared our code to the tutorial and can't see where the disconnect is. Any ideas? At this point a solution that works instead of what is in the tutorial will be fine as well.
I'm new in coding and I'm stucked with a resize problem.
My header is an image with two buttons on top (which will be the menu). I want to build a responsive template. But when I resize the window the two buttons doesn't entirelly follow the image and stays below the image.
How can I fix it?
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>My Website</title>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/flowtype.js"></script>
<style type="text/css">
body {
overflow-x: hidden;
}
.image-banners {
position: absolute;
z-index: -1;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
top: 0em;
left: 0em;
}
.banner-title {
position: relative;
font-family: 'Segoe UI', sans-serif;
font-size: 2em;
text-shadow: 0.05em 0.05em black;
color: rgba(255, 255, 255, 1);
top: -0.5em;
left: 2em
}
nav {
position: fixed;
margin-top: 2.5em;
margin-left: 23em;
font-family: 'Segoe UI', sans-serif;
font-size: 0.5em;
line-height: 2.6em;
}
.link-nav {
text-decoration: none;
color: rgba(215,215,215,1);
}
.menu-button-left {
background: rgba(143,3,6,1);
background: -webkit-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
background: -moz-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
width: 15em;
height: 2.5em;
text-align: center;
float: left;
border-radius: 0.3em 0 0 0.3em;
border-right: 0.1em solid;
border-color: rgba(106,2,4,1);
}
.menu-button-left:hover {
background: rgba(106,2,4,1);
background: -webkit-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
background: -moz-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
}
.menu-button-right {
background: rgba(143,3,6,1);
background: -webkit-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
background: -moz-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
width: 15em;
height: 2.5em;
text-align: center;
float: left;
border-radius: 0 0.3em 0.3em 0;
}
.menu-button-right:hover {
background: rgba(106,2,4,1);
background: -webkit-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
background: -moz-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
}
</style>
</head>
<body>
<header>
<img class="image-banners" src="images/Banner.png" />
<h1 class="banner-title body">MY WEBSITE</h1>
<nav>
<a class="link-nav body" href="#1"><div class="menu-button-left"><b>BUTTON 1</b></div></a>
<a class="link-nav body" href="#2"><div class="menu-button-right"><b>BUTTON 2</b></div></a>
</nav>
</header>
<script type="text/javascript">
$('body').flowtype({
minimum : 400,
maximum : 1000,
minFont : 5,
maxFont : 40,
fontRatio : 30
});
</script>
</body>
Thanks for you
First of all, it is common in these cases to create jsfiddle links or something similar to demonstrate your problem. In that case you can find one here.
Now to add responsiveness to your buttons you need to use media queries. (this applies in general for the responsive design) Please have a look how to use the media queries here and I guess you will be ready enough to solve it.
My site has a wrapper with three background images. A static top and bottom image and a third image that repeats along the y axis. For some reason the top background image is getting cut off and I can't figure out way.
Here is a link to the live site: http://storrepictures.weebly.com/projects.html
I have offset the top and bottom images so you can see what they look like. You can see that the top one is cut off. I've tried messing around with some of the div padding settings but can't seem to get it to work.
One interesting note: The background images used to be JPEGs (I switched to PNG files because I needed transparency). When I was using JPEGs this was not a problem - the three images lined up perfectly.
Let me know if it would help to have the actual code posted. From what I've been reading on this forum, people seem to like looking at the live site and I didn't want to make the post too long.
Thanks a lot for all your help.
*Here's the CSS:
body {
background: #ffffff;
font-family: Tahoma, arial, sans-serif;
font-size:12px;
color:#666666;
margin: 0;
padding: 0;
}
#wrapper {
background: url(containerbg.png) center repeat-y;
}
#wrappertop{
background: url(containertop.png) no-repeat;
background-position: 0px -40px;
}
#wrappertbtm{
background: url(containerbtm.png) no-repeat;
background-position: 34px 480px;
padding-bottom: 65px;
}
.title{
width: 1022px;
min-height: 30px;
_height: 30px;
padding: 10px 0px 10px 0px;
font-size: 30px;
}
.title, .title a {
color: #fff;
}
#container {
width: 100%;
position: relative;
top: 125px;
bottom: 0px;
margin: 0px;
padding: -300px 0px 0px 0px;
}
#content{
width: 800px;
min-height: 500px;
_height: 500px;
margin: 0pt auto;
}
#content a{
color: #ff6633;
text-decoration: none;
}
.weebly_header{
background: url(%%HEADERIMG%%) no-repeat;
}
And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#content
{
height:400px !important;
}
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
<div id="wrapper">
<div id="wrappertop">
<div id="wrappertbtm">
<div id="container">
<div id="header">
<div id="headerleft">{logo max-height="60"}</div>
<div id="navigation">{menu}</div>
</div>
<div id="content">{content}
<div id="footer">{footer}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
From what I can see, your body element has padding and margin values interfering:
body {
background: url(theme/backgroundtop.jpg?909894) left top repeat-x,
url(theme/backgroundbottom.jpg?909894) left bottom repeat-x,
url(theme/backgroundmid.jpg?909894) left repeat;
font-family: Tahoma, arial, sans-serif;
font-size: 12px;
color: #666666;
height: 100%;
margin: 100px 0 0 0;
padding: 100px 0 0 0;
}
You should get rid of these rules:
body {
/* ... */
margin: 0;
padding: 0;
}
and all should be fine.
Note: setting height: 100% to the body element is meaningless, you might wanna remove that, too.
Note #2: you have only 3 values for the multiple backgrounds of the body, which will be parsed as T/LR/B, while the order or those values indicates you should change their order, i.e. backgroundtop / backgroundmid / backgroundbottom instead of backgroundtop / backgroundbottom / backgroundmid
What I want is to have a centered content column that has a bg with a long vertical gradient. It will most likely extend past the browser, however I don't want it to create scrollbars. I want it to act as if it were like the body background where it continues and is only revealed if the browser is larger or there is more content.
Looks like you need something like this. My example used tables, but you can try to replace it with div layout.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>aruseni</title>
<style type="text/css">
body {
font-size: 14px;
font-family: arial, helvetica, sans-serif;
color: #000;
background-color: #9b9b9b;
}
html, body{
margin:0;
padding:0;
height:100%;
border:none
}
a, a:link {
font-weight: bold;
color: #000;
}
a:visited {
font-weight: bold;
color: #444;
}
img {
border: 0;
}
table.site {
border: 0;
padding: 0;
border-spacing: 0;
margin: 0 auto;
width: 80%;
height: 100%;
min-width: 700px;
}
tr {
vertical-align: top;
}
td {
padding: 0;
}
td.left_side {
width: 200px;
}
td.right_side {
width: 200px;
}
td.content {
padding: 10px;
background-color: #fff;
background-image:url('gradient-1x2000.png');
background-repeat: repeat-x;
width: 200px;
}
</style>
</head>
<body>
<table class="site">
<tr style="padding: 0px;">
<td class="left_side"> </td>
<td class="content">
<p>Your contents go here. :)</p>
</td>
<td class="right_side"> </td>
</tr>
</table>
</body>
</html>
The gradient here is an image with 2000 height and 1 weight. The gradient starts in the top, and if the browser’s height is more than 2000 pixels (oh, really?), as “background-color: #fff;” specifies, the white colour is rendered.