Any idea or explanation how they did the backgrounds of this site?
http://upcircuit.org/
Basically, a fixed background is the trick here.
But there are multiple backgrounds and I am trying to solve the tricks of this site :))
I tried scanning the page source but I have no idea how they did this.
They have panels that are the size of the window. Then what they are doing is setting a background image for each panel and setting its background-attachment: fixed so that it stays positioned relative to the window, not the div it is in.
I set up the fundamentals for you here: http://jsfiddle.net/Zc822/
body, html {
width: 100%; // Sets the html and body width and height
height: 100%; // to the width and height of the window.
margin: 0;
}
.panel{
width: 100%; // Sets each panel to the width and height
height: 100%; // of the body (which is set to the window)
background-repeat: no-repeat;
background-attachment: fixed; //Sets background fixed in window
background-size: cover;
}
Then you just need to specify a background-image for each individual panel.
Pretty sure this is what you are looking for.
What have you tried? Have you tried to use
background-attachment: fixed;
Hope this helps.
This is a parallax effect, which emulates a 3D space by having your foreground and background move at different speeds. It looks like images are perhaps swapped out and fixed at certain scroll spots. You'll need to use a little javascript, but it is not too difficult a trick to pull off:
Here's a library to help:
http://matthew.wagerfield.com/parallax/?utm_medium=App.net&utm_source=PourOver
Here's another neat site that does some neat things with parallax and scrolling: https://www.google.com/nexus/5/
It is parallax effect. Here are some tutorials:
http://www.1stwebdesigner.com/css/create-scrolling-parallax-website/
http://ihatetomatoes.net/simple-parallax-scrolling-tutorial/
http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
Here are some examples for inspiration:
http://www.awwwards.com/30-great-websites-with-parallax-scrolling.html
Related
in my Vue Application I have a login page, where I want to show a specific background. I tried to set the background like this:
`<template>
<div class="background"></div>
</template>
<style>
.background {
background: url("./images/background.svg");
background-size: cover;
}
</style>`
Now when I open the browser and watch the inspector, it says that the width and heigt of the div is 0x0. The html and body elements are also set to height 100% and width 100%.
When I define a specific height and width in the css the picture is shown, but I want to make the background responsive so this is no option for me. Does anyone know what the issue could be?
If you insert the below properties it should tell the .background to fill the viewport, this may mess up the aspect ratio. But depending on your needs this can be fixed, the second set of code will prevent the img from showing up more than once and will tell it to keep the original proportions.
Hope this helps
height: 100vh;
width: 100vw;
background-repeat: no-repeat;
background-attachment: fixed;
Before you try to close: I know that there are similar questions and answers out there, however none of these solutions work for me, rather just locking scrolling all together. This could possibly be because I am using a website template from w3schools.
I am making a website for a school project where I would like the background to be a picture of tree leaves. Unfortunately, this image doesn't seem to cover the full page, causing it to repeat downwards. This is an issue.
I have used background-attachment: fixed; to solve this issue on chrome (for windows), but have discovered that safari does not support this.
The website's code can be accessed: here. (Control + U for page source)
tldr; I need to find an equivalent to background-attachment: fixed; for safari that works for my website.
TIP: You will have to test the page in safari to see the issue.
You can't keep the background on the actual body in this case because of the Safari attachment-fixed problem as you point out.
You can however put the background on a pseudo element and then use the 'ordinary' CSS fixed position so it stays in place even as you scroll down.
Here's a basic example:
body {
width: 100vw;
height: 200vh;
margin: 0;
padding: 0;
}
body::before {
content: '';
position: fixed;
width: 100vw;
height: 100vh;
background-image: url("https://hdwallsource.com/img/2014/5/green-background-21874-22427-hd-wallpapers.jpg");
background-size: cover;
z-index: -1; /* added */
}
Note: the background size is set to cover so the whole viewport is covered whatever its aspect ratio (some of the img may get cropped either top/bottom or at the sides so that it fits).
Parallax scrolling backgrounds don't seem to work on Material Design Lite. Or I'm doing it wrong.
This is my problem:
https://i.imgur.com/6YbSkm5.png
The huge whitespace in the middle is not showing the background-image or background: I'm giving it when testing it out on a HiDPI screen. However, it works on other screen sizes like MDPI and smaller ones (at least according to Chrome). I tried using a separate .parallax class with the following:
.parallax{
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
but that didn't work nor did it work with the code that's in the image.
I'm using the Material Design Lite framework and I think it's that that's causing the issue. When I go into the Inspect Element view and remove both display: flex and display: webkit-flex on the .mdl-layout class, it seems to work.
paralax doesnt work due to problem with css overflow settings in MDL.
There are two ways of fixing it:
1. change overflow setting in MDL css
2. Map height of site/scroll on div with class .mdl-layout__content
for example for events on scroll:
$('.mdl-layout__content').on('scroll', function () {
Try commenting out like below at material.css file.
.mdl-layout__container {
/* position: absolute;*/
width: 100%;
height: 100%; }
This may cause non fixed header and drawer,
so we have to resolve this issue. :)
I have a problem with my body selector. When I make my windows smaller it doesn't keep the body width at 100%, and I don't have any clue why.
body
{
margin:0px !important;
background:url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
}
This is generating a footer bug when I make the window smaller because the body is not on the whole width.
I can't add pics to show because I don't have 10 rep, but you can check at this link and make the windows smaller:
http://websoftit.ro/lackoflove/about.php?active=1
i dont want my website to be responsive i just want my body to be 100% on any resolution. here are the links of pics and problem i have when i make the window smaller: i.imgur.com/70sj43G.png i.imgur.com/OgMZVxa.png
You have widths set inside the body. For example your navigation has a width of 1060px as does your main_bg div.
The problem is actually caused by div#banner, which has the following style:
#banner {
position: absolute;
width: 150px;
margin-top: 5px;
margin-left: 1040px;
}
Margin set to 1040px together with width: 150px causes your banner to have overall width of 1190px, that is wider than the rest of site.
I assume you've used position: absolute on your banner to avoid this problem, but this is not enough to make it work like you want.
You can read more about solution to this issue here.
Note:
The above solves your problem, but won't help making your site responsive.
If responsive design is your goal (you didn't say this, I'm just guessing that maybe it is), I'd recommend looking at some tutorials to get the basic rules etc.
There also are responsive frameworks like Bootstrap or Zurb Foundation that help making responsive websites.
The child divs are not set to fluid widths. If you change the CSS "width" to "max-width" you'll get a chance to see how the layout changes at different screen widths. There will definitely be further updates needed to your CSS, but this will get you started.
document.onresize = function() {
document.body.style.width = document.body.scrollWidth+"px";
}
This can help you, when the document is resized, this callback reset body width to 100% of document's width.
I was looking at path.com today and liked their implementation of a dynamically sized cover photo. If you check it out you will see that it sizes nicely no matter your screen size.
I looked a little more into it and noticed the background image is attached to the body tag. I also noticed the body appears to get its size from the form element inside it, meaning the body itself it actually shorter than the total page.
Does anyone know how they accomplish this?
Also, the body height is set to 100% of the viewport.
I think you're looking for this part:
body.home {
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}