I am building a personal site . But I have a big problem ,background-attachment: fixed is not working on mobile devices . I have 4 sections, with bg fixed, + javascript effect .
The last section is very important ...
Can someone help me please to fix these probleme ? I will realy apreciate .
The site is here : my site
.hello
background-image: url("../img/hello.jpg")
background-repeat: no-repeat
background-size: cover
background-position: center
background-attachment: fixed
height: 100vh
min-height: 600px
display: flex
flex-direction: column
justify-content: center
align-item: center
text-align: center
// Sorry for my bad english ,
It's unsupported on mobile unfortunately...browsers have to completely re-render the image each time you scroll and in the past it was too much of a performance hit, although it does look like support for it is starting to trickle out https://css-tricks.com/almanac/properties/b/background-attachment/. The only way to get a comparable effect at the moment is to have your backgrounds as separate elements with position: fixed, like...
.background{
position: fixed;
background-image: url(image source);
top: 0;
left: 0;
width: 100%;
height: 100%:
z-index: 0;
}
and everything that scrolls over it should have either position: relative or position: absolute with a z-index higher than 0.
Related
This is a Next.js project and the mobile being used here is google pixel 3a. I'm having a problem where on longer pages my background image will not display at all. Here is how it looks on pages where the height is not exceeding the viewport height
But on some longer pages where you need to scroll to reach the bottom, it doesn't display at all
body {
background-image: url("https://via.placeholder.com/500");
background-size: cover;
margin: 0;
padding-left: 5vw;
padding-right: 5vw;
height: 100vh;
min-height: 100%;
width: 90vw;
font-family: system-ui;
overflow-x: hidden;
font-size: 1.3rem;
}
If I change background-size to auto then it will work on every page, but I would like cover. Maybe I don't understand how cover works for pages where scrolling is required, but I would like the background image displayed as it is in the first image, and if the content is longer than the view port, the content should just scroll across the image without the image moving. Any help is appreciated. Thanks.
If I've understood correctly, you want the background image to at least fill the viewport but if the body is higher than that you want it to fill the whole body.
Therefore, tell it that the min-height of the body must be 100vh and don't set an actual height, let it work it out from the content.
I'm assuming in this snippet that you want just one copy of the background, centered and using size cover (so it may get cropped top/bottom or at the sides depending on relative aspect ratios).
A dummy div is put in the snippet to ensure we get scrolling.
body {
background-image: url("https://via.placeholder.com/500");
background-size: cover;
background-repeat: no-repeat no-repeat;
background-position: center center;
margin: 0;
padding-left: 5vw;
padding-right: 5vw;
min-height: 100vh;
width: 90vw;
font-family: system-ui;
overflow-x: hidden;
font-size: 1.3rem;
}
div {
height: 350vh;
}
<div></div>
I am trying to make website which has some icons on map. The problem is, that when I am making window smaller icons have wrong position, and they are in different places than I would like them to be. Also I cannot use bootstrap to position them. Only HTML, CSS and JS/jQuery.
Option 1: https://imgur.com/a/ifKFXRL
Option 2: https://imgur.com/a/R5DmQbt
I have already tried thing like:
min-height:100%;
min-width:100%;
}
#media only screen and (max-width: 1000px) {
body .background .foodini-logo img{
width:15%;
height:15%;
margin-top: 10%
margin-left:12%;
}
}
It only changed it for a while, because with resolution getting lower I had to add another media like every 100px, which is not an option for every icon I think.
html{
height:100%;
width:100%;
}
body {
background: url("../img/bg.png") no-repeat center center fixed;
background-size: cover;
background-color:rgb(178,212,238);
}
.
.
.
body .background .foodini-logo{
margin-top:15%;
margin-left:17%;
}
body .background .haps-logo {
margin-top: 35%;
margin-left: 23%;
}
I would like to have this icons be all the time as in option 1, no matter what resolution user will have on his screen.
The tricky part is that you're trying to use background-size: cover with position: relative logos. Cover is going to grow and shrink based on how large the elements are inside it. But you don't want that.
.background {
background: url("../img/bg.png") no-repeat center center fixed;
background-size: 100% auto;
background-color: rgb(178,212,238);
padding-bottom: 65%;
}
Changing the background-size to 100% auto will make the background 100% wide without stretching. I also added padding to make sure the container will keep the correct height ratio, since we're going to make the logo position: absolute so they don't conflict with each other.
.logo {
position: absolute;
transform: translate(-50%, -50%);
}
.haps-logo {
top: 35%;
left: 23%;
}
I added transform so the logos are centered on their position, rather than being pinned to the top-left of the logo. A bit easier in my opinion, but not required.
If you post a codepen or jsfiddle link with your code we can make sure it works, but otherwise, you can adapt this to your current setup.
When I scroll on my website there is a white bar at the bottom of my background image. The image is attached to body:before {}. I have tried a variation of CSS settings and tricks to circumvent this but I can't seem to get around it. I even tried having the image overflow 110vh to prevent the white-space but that also failed.
Example of the issue below. Perhaps this is strictly iOS related? I am using iOS 10 and I have tried both Chrome and Safari and the issue persists on both.
Here is my website:
Here is my CSS:
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
min-width: 100vw;
min-height: 110vh;
z-index: -10;
background: url(../css/images/brotherhoodSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Any suggestions for this one? I've already had to use this crazy body:before workaround because background-attachment:fixed doesn't work well on iOS mobile devices.
Thanks
I am trying to make a instagram style explore page but i have one question here. I have created this DEMO from codepen.io .
In this demo you can see the images. The images width and height is different not a same. I want to crop that images with CSS Like this DEMO page.
The difference between the first and second demo
First demo :
.exPex {
width: 100%;
}
Second Demo:
.exPex {
width: 200%;
}
So second demo working just in crome but this is not good idea i think. Anyone can tell me, How do I obtain the results of their second demo?
You could set the images up as background images and use background-size: cover; to get the effect that you're looking for (DEMO). This has the downside that your users will not be able to right-click or drag the images (to save them, etc.) as they might be expecting to do.
HTML for an example image:
<div class="_jjzlb" style="background-image:url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');">
</div>
CSS:
._jjzlb {
position: relative;
padding-top: 100%;
width: 100%;
overflow: hidden;
margin: 1px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Optional centered background */
background-position: center;
}
If this downside is not acceptable, you could also put hidden images on top of the backgrounds so that they will work like the user expects.
HTML for an example image with normal image mouse interactions:
<div class="_jjzlb" style="background-image: url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');">
<img src="http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg" class="exPex">
</div>
CSS to hide the image on top:
.exPex {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity:0;
}
And here is a DEMO with the images, interacting with the user like you might expect them to.
EDIT: As pointed out by #GCyrillus, there are downsides to using a background image rather than keeping the images in the content of the page. These might include search engines and screen readers failing to recognize the image. I do not have an exhaustive list of the downsides but depending on your application it may be worth investigating.
you may use transform :
.exPex {
position: absolute;
left: 0;
top: 0;
min-width:100%;
margin: 0;
transform: scale(2);
transform-origin: 0 40px;
}
http://codepen.io/gc-nomade/pen/jrbPRy
if you define a dimension to the image the aspect ratio will also be included. The best way is to put your image inside a div and declare the size of images that way you will be able also to crop images.
Well it might seem obvious but you could just put a fixed width to it ? Try to change width: 100% with width: 400px on .exPex for example.
I've seen this trick on many websites and I want to make it for a project of my own.
I have an image background.jpg that is VERY BIG, just to be ready for any screen size.
I wish to center the background image to the visitor's window.
I mean, while scrolling the window content will move but the background will stay in place - centered vertically and horizontally.
BTW most of the viewers will have old crappy PC's so it'd better not flicker, if it'll be JS.
body
{
background-image: url('background.jpg');
background-repeat: no-repeat; /* you know... don't repeat... */
background-position: center center; /*center the background */
background-attachment: fixed; /*don't scroll with content */
}
put your image on the body background:
body{ background-image:url('your/image/url'); }
and put a div within the body:
<body><div class="div-body">{your site's contents}</div></body>
and create a css selector like this:
.div-body{
overflow:scroll;
width: 100%;
height: 100%;
display: block;
float: left;
}
try what is in this fiddle: http://jsfiddle.net/maniator/3RRYe/3/ demo
see if that works for ya ^_^