I am trying to make my #main div scroll on top of my #main2 div. I positioned both absolutely and used background-attachment: fixed on #main2, but the intended effect does not seem to be working. BY "scroll on top" I mean that when you scroll down on the mouse, #main should scroll down towards a fixed #main2. #main2 should be like the background image of the body while #main1 fluidly scrolls down to the bottom of the body.
https://www.youtube.com/watch?v=GJLzP_4bg3o #7:50 is what I am trying to replicate.
body {
margin: 0 auto;
}
#main {
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
#main2 {
position: absolute;
height: 100%;
width: 100%;
background-color: blue;
top: 100%;
background-attachment: fixed;
}
<!Doctype HTML>
<head>
<html lang="en"
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="clc.css">
<title>CLC Website</title>
</head>
<body>
<div id="main">
</div>
<div id="main2">
</div>
</body>
</html>
Just change #main to position: fixed; and give z-index: 1;
body {
margin: 0 auto;
}
#main {
position: fixed;
width: 100%;
height: 100%;
background-color: red;
z-index: 1;
}
#main2 {
position: absolute;
height: 100%;
width: 100%;
background-color: blue;
top: 100%;
background-attachment: fixed;
}
<!Doctype HTML>
<head>
<html lang="en"
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="clc.css">
<title>CLC Website</title>
</head>
<body>
<div id="main">
</div>
<div id="main2">
</div>
</body>
</html>
To get the parallax effect, I just changed the background-color to background-image and it works fine now.
Check this if help you out.
<head>
<style>
.main { height: 300px; width: 300px;background-color: blue; background-repeat: no-repeat; background-attachment: fixed;
position: fixed;}
</style>
</head>
<body>
<div class="main"></div>
<div style="background-color: red; height: 3000px; width: 300px"></div>
</body>
Related
body {
margin: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
```
positon: fixed does not cling to the top when applied.
I don't think there are any elements, so I think I should stick up completely, why not?
https://jsfiddle.net/9gqcxLn0/
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
you should use top:0
I don't see an issue other than you never told it where it was supposed to fix to. You likely wanted a top: 0 in the style, but it should remain fixed from where it was located without it, I believe.
html, body {
margin: 0;
padding: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
main {
height: 200vh;
}
<main>
abcdefghijk
<div class="content"></div>
12345678901234567890
</main>
Here's my code. I'm a beginner so please let me know if I have any errors.
I need to have the text resize and move when the browser is scaled. As of now it just stays and doesn't move no matter the size. I've tried a media query's but they haven't worked.
html{
background-image: url(images/CBG1.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
h1{
text-align: -webkit-center;
color: #FF6633;
position: absolute;
margin: 0px;
margin-left: 650px;
margin-top: 314px;
width: auto;
height: auto;
}
<!doctype html>
<html lang="en">
<head>
<title>Hoax Studios</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="uft-8">
<link rel="stylesheet" href="work.css">
</head>
<body>
<div id="container">
<div class="header">
<h1>WORK</h1>
</div>
</div>
</body>
</html>
You need to change the alignment and width for h1 as below
h1 {
color: #FF6633;
position: absolute;
text-align: center;
margin-left: auto;
margin-top: 314px;
width: 100%;
height: auto;
}
When opening this up in a browser, the combined width of the two divs does not fully fulfill the width of the body. I have made the background color of the second (right) div black so you can see the white space between the second div and the right side of the page. I tried messing with the border, margin but maybe I did it wrong.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
CSS:
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
}
#div1 {
height: 756px;
width: 300px;
border: 2px solid black;
float: left;
}
#div2 {
height: 758px;
width: 1216px;
overflow: hidden;
background-color: black;
}
Position the divs absolutely and apply media queries so they will be responsive. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
<style>
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
width: 100%;
}
#div1 {
height: 756px;
width: 25%; //change width to fit your need
border: 2px solid black;
float: left;
left:0;
position: absolute;
}
#div1 img{
left: 0;
}
#div2 {
height: 758px;
width: 75%; //change width to fit your need
overflow: hidden;
background-color: blue;
right:0;
position: absolute;
}
</style>
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
Since you are using fixed width, it will not adjust properly to your screen. And in different resolutions it will not adjust correctly to your screen size. Instead use % width.
#div1 {
height: 756px;
width: 35%;
float: left;
}
#div2 {
height: 758px;
width: 65%;
overflow: hidden;
background-color: black;
}
I've setup this fiddle with your example: https://jsfiddle.net/5yfnLcdt/
Here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" media="all" href="page.css">
</head>
<body>
<div id="header"></div>
<div id="body"></div>
</body>
</html>
CSS
body{
background-color: cyan;
margin: 0;
padding: 0;
}
#header{
width: 100%;
height: 200px;
background-color: green;
}
#body{
width: 100%;
background-color: blue;
height: 500px;
position: relative;
top: -100px;
}
Rendered page looks like this:
The relatively positioned div#body is taken out of the normal flow, and we can see the cyan body at the bottom. Is it possible to fix it, so the body height ended where div#body ends?
I can't use margin-top: -100px, because on the real page it breaks the horizontal centering in Opera.
Fiddle: http://jsfiddle.net/xfqzqhws/
Can you check if this will work for you
#body{
width: 100%;
background-color: blue;
height: calc(100% - 100px);
position: absolute;
margin-top:-100px;
}
I wrote an html page, with some css in a separate file and it worked fine. Then i realized that i should add a doctype declaration to my html. I did that and my page was completely messed up! I tried all types of declarations but all ended up the same!!!
This is my html (currently only working with Chrome, and without doctype):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Luca Rood - Home</title>
</head>
<body background="images\background.jpg">
<div id="header">
<div id="header-back"></div>
<div id="top-spacing"></div>
<div id="content">
<a href="index.html" title="Luca Rood - Home">
<img id="image" src="images\logo.png" alt="Luca Rood">
</a>
</div>
</div>
</body>
</html>
And this is my css:
body {
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
margin: 0px 0px 0px 0px;
}
#header {
position: relative;
height: 15%;
}
#header-back {
position: absolute;
width: 100%;
height: 100%;
background: #000000;
opacity: 0.3;
z-index:1;
}
#top-spacing {
height: 20%;
width: 100%;
}
#content {
position: relative;
width: 80%;
height: 60%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
z-index:2;
}
#image {
height: 100%;
}
Please help.
Thanks in advance,
Luca
You are having the classic percentage heights problem. To fix it, you must add height:100% to the body style and add an style on the html element that has height:100% as well:
<style>
body{
/*...*/
height:100%;
}
html{
height:100%;
}
</style>
Hope it works!
Try this above < html > tag
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">