I am trying to make a parallax for the first time and am having troubles.
I'm following this tutorial and then trying to work backwards. The code isn't working however and I'm not sure where I made the mistake, I jumped around to a few other tutorials and tried to adjust the names of different divs and CSS blocks so the code is a bit messy right now.
.html {
height: 100%;
overflow: hidden;
}
.body {
max-width: 30px color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100% overflow-y: scroll;
overflow-x: "Luna"
}
header {
box-sizing: border-box;
min-height: 100vh;
padding 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url(picture1.jpg);
background-size: cover;
transform-origin: center center 0;
transform: tranlasteZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
.image1 {
background: url('img/(picture1.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Schade's Parralax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<p>Hi My name is schade I wrote this so I could have a test of my program.</p>
<div class="image1"> </div>
</div>
</body>
</html>
In first use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect.
body,
html {
height: 100%;
}
h1 {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-transform: uppercase;
text-align: center;
font-family: Helvetica;
font-size: 75px;
}
.parallax {
background-image: url('https://images.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 100%;
/* Parallax scrolling effect */
background-attachment: fixed; // Try to remove this property
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 300px;
line-height: 300px;
background: #ededed;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="parallax"></div>
<div class="content">
<h1>content</h1>
</div>
<div class="parallax"></div>
</body>
</html>
Some mobile devices have a problem with background-attachment: fixed. You can use media queries to turn off the parallax effect:
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
More info about fixed property.
Related
I am trying to darken images using transparency (opacity) so that the foreground text can be better read.
Here is my header HTML:
.header-image {
display: block;
width: 100%;
text-align: center;
/* image must be 1900 x 500 */
background: url('back.1.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
opacity: 1.0;
}
.headline {
padding: 120px 0;
}
.headline h1 {
font-size: 50px;
font-weight: 500;
background: #24292E;
background: rgba(36, 41, 46, 0.7);
color: #FCFCFC;
}
<header class="header-image" style="background: url(' URL TO IMAGE') center no-repeat; background-size: cover;">
<div class="headline">
<div class="container">
<h1>Headline</h1>
</div>
</div>
</header>
You will see that I added 'opacity: 1.0;' on the last line of 'header-image' but it didn't work.
Any idea where I am going wrong here?
Thanks
Well you don't want to change transition of whole div, just an image I guess. You should place it using ::before pseudo-element. Now all css attributes will apply only to ::before:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header class="header-image">
<div class="headline">
<div class="container">
<h1>Headlines</h1>
</div>
</div>
</header>
</body>
</html>
CSS:
.header-image {
position: relative;
overflow: hidden;
height: 180px;
}
.header-image:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url('http://placekitten.com/1500/1000');
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
.headline {
}
.headline h1 {
position: relative;
z-index: 1;
font-size: 50px;
font-weight: 500;
background: #24292E;
background: rgba(36, 41, 46, 0.3);
color: #FCFCFC;
margin: 0;
}
https://jsbin.com/lisakez/edit?html,css,output
You can't apply opacity to a background image.
One way to get around this is to place the image you want as the background directly over the top of the container, which gives the impression it is set as the background. Then place any text directly over the top of the image by applying a higher z-index to the text.
.header-image {
position: relative;
overflow: hidden;
text-align: center;
}
.header-image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.6;
}
.headline h1 {
position: relative;
z-index: 2;
font-size: 50px;
font-weight: 500;
background: #24292E;
background: rgba(36, 41, 46, 0.7);
color: #FCFCFC;
}
<header class="header-image">
<div class="headline">
<div class="container">
<h1>Headline</h1>
<img src="your-image.jpg">
</div>
</div>
</header>
See fiddle
I'd like to have a image on my front page on a new site cover up the total width and make it change size depending on your resolution, but still have it horizontally centered.
This is the site I'm working on currently: http://jonathan.ohrstrom.nu and I want the whole red part be covered with this image: http://jonathan.ohrstrom.nu/style/img/featured.jpg
How can I do this? This is the css code I have for the div I want the image in:
.featured {
background-color: red;
width: 100%;
height: 700px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
I tried this with no success:
.featured {
background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg) no-repeat;
width: 100%;
height: 700px;
size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
But that just didn't load the image at all. Without the no-repeat then the image covered the whole width but it repeated itself..
try make it like this
.featured {
background: url('http://jonathan.ohrstrom.nu/style/img/featured.jpg') no-repeat center center ;
background-size: cover;
z-index: 1;
}
Use background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);background-size: 100% 100%;
/* GRUNDER */
body {
background-color: white;
font-family: verdana;
}
/* MENY */
.menu_wrapper {
width: 100%;
height: 70px;
background-color: rgba(45, 45, 45, .9);
left: 0;
top: 0;
position: fixed;
z-index: 99;
}
.menu_content {
width: 1000px;
margin-left: auto;
margin-right: auto;
/*background-color: red;*/
line-height: 70px;
color: #a0a0a0;
font-weight: 400;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
}
.menu_logo {
float: left;
}
.menu_links {
float: right;
}
a.menu {
color: #a0a0a0;
transition: .1s;
text-decoration: none;
}
a.menu:hover {
color: #e5a000;
}
ul.menuList {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
display: inline;
margin: 0 10px;
}
/* CONTAINER */
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.featured {
background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
background-size: 100% 100%;
width: 100%;
height: 700px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
<html><head>
<title>Webutveckling!</title>
<!-- META TAGS -->
<meta name="description" content="En webbyrå som skapar responsiva och smarta websidor åt större och mindre företag!">
<meta name="keywords" content="webutveckling,webbyr�,svensk,stockholm,billig">
<!-- CSS LINKS
<link rel="stylesheet" href="http://jonathan.ohrstrom.nu/style/style.css"> -->
<link rel="stylesheet" href="http://jonathan.ohrstrom.nu/style/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,500i" rel="stylesheet"></head>
<body>
<a name="top"></a>
<!-- MENY -->
<div class="menu_wrapper">
<div class="menu_content">
<div class="menu_logo">
*LOGO HÄR*
</div>
<div class="menu_links">
<ul class="menuList">
<li>hem</li>
<li>info</li>
<li>projekt</li>
<li>Kontakt</li>
</ul>
</div>
</div>
</div>
<!-- WELCOME-BILD -->
<div class="featured"></div>
<div class="container">
</div>
<a name="about"></a>
<!-- jQuery -->
<script src="http://jonathan.ohrstrom.nu/js/jquery.js"></script>
<script>
$('a').click(function(){
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);
return false;
});
</script>
</body></html>
Here's what I suggest you:
.featured {
background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 700px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
You can do a lot with the CSS background property:
Set a color with Hex of RGB.
Set a image with url() or the single property background-image.
Center the image horizontally and vertically with percentage or top/center/bottom attributes. You can also set it with the property background-position.
You can also set the repeat of the image with the attributes repeat/no-repeat. It also has it's own property: background-repeat.
Set the size of the image with a value or the property background-size. You can also use this property to scale the image in the container like you want with the property cover or contain.
You can do a lot more, see this link for more information on background.
I have added a texture background image in html body part and it is repeating the whole body section, but I want this texture will be repeat half of the browser
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background</title>
<style>
body{
background:url('bg.png');
}
</style>
</head>
<body>
</body>
</html>
reference image - what I want
Just use a pseudo-element on the body that is absolutely positioned.
It's 50% wide, 100% high and over 50%.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
position: relative;
}
body:before {
content: '';
position: absolute;
left: 50%;
height: 100%;
width: 50%;
background-image: url(http://lorempixel.com/image_output/abstract-q-c-25-25-1.jpg);
z-index: -1;
}
h1 {
text-align: center;
color: red;
margin: 0;
}
<h1>My Heading</h1>
Below is the solution
Demo
HTML:
<div id="background"></div>
<div id="wrap">content area</div>
CSS:
body {
background: url('bg.png');
}
#background {
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color:#fff;
z-index: 1;
}
#wrap {
position: relative;
z-index: 2;
padding: 30px;
text-align: center;
font-weight: bold;
}
I am trying to have my background image with a transparent overlay that's split into top and bottom.
Lastnight, in SO Chat, I tried to supply the guys with a JSFiddle, but after posting the code, JSFiddle wasn't able to reproduce the layout correctly. So here's what the desired effect should look like:
(note that this is hand drawn and so you can't see a background image):
You can see that the page should be split horizontally. The blue part should be 50% high and the white part should be 50% high. With a logo in the centre. However, when I add the background image, the white section is pushed down, like this:
(note you still can't see a background image, because it's hand drawn):
Adding a background image to the html element, body element or any child container causes the white div to either be cut off at its top or pushed down, leaving a gap between the bottom edge of the blue section and the top edge of the white section.
How can I get my background image to stop affecting the flow of the document? I didn't think that CSS background images affected layout?
Here is my code:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Home | Hmmm</title>
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Core.css" />
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Home.css" />
</head>
<body>
<header>
<img id="key" src="~/Shared/Assets/Images/Icons/Kdfg.png" alt="Sign In | Create an Account" />
<img id="logo" src="~/Shared/Assets/Images/Logos/JdfgWLSS.png" alt="Hmmm" />
</header>
<div id="main">
<footer>
<p style="margin-top: 100px; text-align: center; color: white;">© Hmmm 2015</p>
</footer>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
outline: none;
outline: 0;
border: none;
border: 0;
font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
}
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
}
body
{
width: 100%;
height: 100%;
overflow: hidden;
background-image: url('../Images/Backgrounds/JWSSB.jpg');
background-repeat: no-repeat;
background-size: cover;
}
header
{
width: 100%;
height: 50%;
background-color: #2695D7;
opacity: 0.8;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
}
#key
{
float: right;
}
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
}
#sections
{
width: 100%;
height: auto;
}
.section
{
width: calc(100% / 3);
height: auto;
float: left;
text-align: center;
font-size: 10pt;
}
I have discovered a workaround. I don't understand it, but it's alright for now:
Add a border to the top of the white section:
#main
{
height: 50%;
background-color: white;
opacity: 0.8;
border-top: 0.1px solid white;
z-index: -100;
}
Then, make the logo appear on top again by changing its z-index:
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
z-index: 1000;
}
I am not sure if this way will be okay for you, but still. Link to jsfiddle
html:
<div class='top'></div>
<img src='http://silvercreekart.weebly.com/uploads/3/7/3/0/37300503/9869404.png' class='logo'/>
<div class='bottom'></div>
css:
html, body {
height: 100%;
width: 100%;
}
.top {
background: cyan;
height: 50%;
}
.bottom {
background: grey;
height: 50%;
}
.logo {
position: absolute;
left: 50%;
top: 50%;
margin: -128px 0 0 -128px;
}
I like my way much more then using calc. It is better way if you know sizes of your logo (to put it in the middle with negative margin)
Change your CSS to:
body {
height: 100vh
overflow: hidden;
background-image: url(...image...);
background-repeat: no-repeat;
background-size: cover;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
display: inline-block;
}
I'm all new to this and I have this site that I'm using to learn the basics. I'm just put together a simple parallax scrolling effect, where the header is scrolling and contains one H1 element.
I've been trying to figure out if it's possible to put some scrolling animation on the text so the text behaves similar to the images in this video from DevTips: https://www.youtube.com/watch?v=WTZpNAbz3jg&feature=player_detailpage
I did try to put some jQuery together to target the H1 and use same technique as shown in the video, but it didn't work. Maybe my code is all wrong because the test he does where the scroll position is printed out in the console did not show for me.
Here's the html and css code that I'm working with. Unfortunately I can't add screenshots since I'm new here and lacking points.
Thanks a bunch!
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parallax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="masthead">
<h1>Some Text</h1>
</div>
<div class="page"></div>
<script src="jquery-2.1.3.js"></script>
<script src="function.js"></script>
</body>
</html>
CSS
*, *::before, *::after {
box-sizing: border-box;
margin: 0px;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
body {
overflow-y: auto;
font-size: 120%;
perspective: 1px;
transform-style: preserve-3d;
}
h1 {
color: #fff;
font-size: 300%;
text-align: center;
padding-top: 200px;
}
.page {
padding: 20px 20%;
position: relative;
top: 60%;
background-color: #fff;
height: 900px;
}
.masthead {
position: absolute;
background: url("000017.jpg");
width: 100%;
height: 60%;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 50%;
background-clip: border-box;
background-origin: padding-box;
background-size: cover;
transform: translateZ(-0.9px) scale(1.9);
z-index: -900;
top: -20%;
}
Your code seems to work very well!
Yet, the effect is not very apparent (but personally, I prefer discrete effects). Look at the snipppet in full page.
*, *::before, *::after {
box-sizing: border-box;
margin: 0px;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
body {
overflow-y: auto;
font-size: 120%;
perspective: 1px;
transform-style: preserve-3d;
}
h1 {
color: #fff;
font-size: 300%;
text-align: center;
padding-top: 200px;
}
.page {
padding: 20px 20%;
position: relative;
top: 60%;
background-color: #fff;
height: 900px;
}
.masthead {
position: absolute;
background: url("http://placehold.it/800x600/00ffff/66ffff&text=background") #55ffff;
width: 100%;
height: 60%;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 50%;
background-clip: border-box;
background-origin: padding-box;
background-size: cover;
transform: translateZ(-0.9px) scale(1.9);
z-index: -900;
top: -20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parallax</title>
</head>
<body>
<div class="masthead">
<h1>Some Text</h1>
</div>
<div class="page"></div>
</body>
</html>