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).
Related
I try to have 4 full-screen background image ( i think it's called hero section) on my page.
I used this style for every row with full-screen background.
.kimiabg {
background: url(http://kimia-tak.com/wp-content/uploads/2018/02/s2.jpg);
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100vh;
padding: 2rem 0;
}
everything is fine. unless showing background on iphone. it is blurry. I really do not know what is the problem.
you can check the live website here : http://kimia-tak.com
The background-attachment: fixed; is the problem. This is not really supported on iOS Safari.
Can I use background-attachment ?
iOS Safari:
Partial support refers to supporting local but not fixed
Only supports local when -webkit-overflow-scrolling: touch is not used
https://caniuse.com/#search=background-attachment
For more information and workarounds you can look at the answer from #fernandopasik to a similar question: https://stackoverflow.com/a/23420490/7426156
I'm trying to scale down a background image with css. My browser has it scaled all the way to it's maximum resolution, and nothing that should work, is working.
When I try and use max-width it doesn't scale the image, it only cuts off the right edge of the image, and it stays at the same scale.
Here's my CSS
.proj-header{ /* Settings for projects bgr image */
position: relative;
bottom: 20;
height: 450;
background-image: url(pics/fight_shy_lot.jpg);
background-repeat:no-repeat;
background-position: 50% 38%;
max-height: 40%;
max-width: 100%;
background-attachment: fixed;
background-position: center;
}
I don't think html is important as it's just an empty div. Everything is in the css.
The only thing I could get to work is background-size, but it lead to issues when the viewport is resized from my base res.
So my questions is why isn't max-width doing what everyone says it should be doing, or am I using it wrong?
I'm pretty new to web design so I'm sorry if this is a stupid question, but I searched all over for an answer, and all people say is to use max-width, which doesn't do anything for me.
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. :)
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
I was given this design that I'm trying to apply to my website. Notice that the <html> element has a background image (hands in the air), that sticks to the bottom of the page.
However, when I migrated the css files over to my application, for some reason this image appears halfway down the page instead. I've checked the relevant CSS and in both cases it's:
html {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("../../img/bg.svg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
outline: 0 none !important;
}
so why does the image stick to the bottom of the page here, but appear halfway down the page here.
You have height: 100% set for your html and body. This is normally done to able to have full-height elements. But in this case, this is proving to be the cause of the issue. Removing this it fix the issue.
Check in Firebug or Chrome Inspector and you will see some thing like:
html, body {
height: 100%;
}
Remove it. OR Override it from your style sheet.
It's not working on the 2nd site due to the body { height: 100% } styling.
static/bundle-bundle_responsive_head.css:
html, body {
height: 100%;
}
Looks like the computed height of the 1st link is set such that the image is at the bottom, whereas for the link where the image appears part way down the computed height is much lower.
height: 170px; compared to height: 2006px;
I'm not sure what's setting the height for you, but sorting that out will solve your image problem
Edit:
Actually it seems to be in this rule which is only on one of those sites:
media="screen, projection"
html, body {
height: 100%;
}
It looks like it's actually the background image on the body tag that is not sticking to the bottom. Turning off the height: 100% body rule in bundle-bundle-responsive-head.css fixes it, though I'm not sure how that will affect other things on the site.
I found this by using the DOM inspector in Chrome and turning on/off the rules for the various elements to see what effect they would have.