Develop Reference

Background size cover not working on longer pages on mobile

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>

How to resize background image with CSS/JS

I have fullscreen website with background-image: no-repeat and background-size: cover style on it. I want to make animation that the background image will resize in 10 second to the right side of the page to 350px width and 175px height. It's even possible to do it?
body {
background-image: url(/image.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
}
I saw some webkit animation but there was problem with the background-size: cover style, so the animation doesn't work.
I tried :
$(function(){
$('body').one("mouseover", function() {
$('body').addClass('hover');
});
});
But it will resize the image instantly and move it to the right, I want to resize them linear.
Thank you very much guys! :-)

You could add something like this to your css:
body {
background-position: center center;
transition: background-size 10s ease-in-out, background-position 10s ease-in-out;
}
body.hover {
background-size: 350px 170px;
background-position: right center;
}
https://codepen.io/anon/pen/oPbqPm
The problem with this, is however, that it won't animate the sizing.

I would suggest you don't set the image as background. Instead, position the image behind all other elements using position and z-index properties. Once set, you can add the animation. For more details on using z-index and position attributes see the link below and "try it yourself" example:-
https://www.w3schools.com/cssref/pr_pos_z-index.aspenter link description here
You can then use css animation for resizing of the imgae.
TO learn how to add animation see this link:-
https://www.w3schools.com/css/css3_animations.asp

How to achieve this scrolling effect in Bootstrap?

How do I achieve this scrolling effect in Boostrap? Have a fixed image background with the content div overlayed on top when scrolling:
http://www.standardhotels.com/culture/things-to-do-july-2017-new-york-los-angeles-miami

There are several ways you could achieve this. You could fix a background image to html and offset the body, adding padding to keep text in the viewport. For example:
html {
background: url(DESIRED BACKGROUND IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background:lightblue;
padding-left:150px;
padding-right: 30px;
position:relative;
left:-150px;
top:80%;
}
Check out this basic (but very cute) kitten example.
EDIT
Looking further into your example's code, you could also add margin-top to the body and remove the positioning top. Your example shows margin-top: calc(100vh - 140px) !important;
Here's an updated version of my fiddle with the properties swapped. You can see that the effect is very similar.

You are looking for Parallax scrolling. Here is the link with working demo on how to achieve this.

How can I stop background from moving when zooming out?

When the browser is at 100% the back images are great. Even at 50% zoom out they're still okay. but as you continue to zoom out all the way to 25% the background image position collapses or "hides" and I'd like the images' background-position: center top to remain intact no matter minimize or maximize.
I've attached an example:
http://i65.tinypic.com/k1e54z.jpg
You can also visit www.medshopandbeyond.com and zoom out in your browser to see what's happening. [BTW: I am aware of the grammatical errors in the pics :) ]
The only one that gets close enough to what I want is background-size:contain
however the image is no longer full width from screen to screen if setting it to this
#header-image4 {
background-image:url("{{ 'old-friends-555527_19201.jpg' | asset_url }}");
height: 750px;
position: relative;
background-repeat: no-repeat;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: -50px;
background-size: cover;
width: 100%;
margin-top: -10px;
}
<div id="header-image4"></div>

This is because you are using background: cover and a fixed height. As you zoom out your height remains the same but the width increases and background: cover will expand to fill that width which is why you are getting an unusual crop. The same issue can be seen if you pull out the width of the browser window on a large monitor.
Personally, I'd create a different height for the div at different breakpoints e.g.
#media screen and (max-width: 1920px){
#header-image4{height: 1000px}
}
#media screen and (max-width: 2560px){
#header-image4{height: 1500px}
}

Problems with logo not appearing on background image

I used photoshop to layer a logo over a background image. I have the background image set up that it is responsive. I set up a image map to use the logo as a main page link. I works well on two of the other pages of the site but this page is different because of the way the background image is set up. I thought I could play a trick by using a transparent image along with usemap. did not work. I am able to see the hand when I hover over the image map, but there is no logo there. the url is http://jandswebsitedesigns.com/test/index.html. an example of the logo on the upper left hand corner is http://jandswebsitedesigns.com/test/im-new-here.html. I had a similar problem with the im-new-here page. The "top-bar" div (which is transparent) that is on top of the upper part of the image, was covering the clickable area. Samuel responded and I added div#top-bar { height: 0px; } and it fixed it. worked nicely, but the same fix won't work here.
<style>
body {
background: url(images/cd-background-1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
min-height: 100%;
z-index: 1; }
</style>
<div style="text-align: center; height: 800px;">
<img src="images/trans.png" usemap="#logomap">
<map name="logomap">
<area shape="poly" coords="11,2,430,3,432,307,3,320"
style="outline:none;" href="index.html" alt="main page">
</map>
</div>

An image background may not appear if height and width are not set for the element that containing it
html, body{
width:100%;
height: 100%:
}
.my-div{
display: block:
width: // must give width
height: // must give height
background-image: url('...'):
}

First of all, I would recommend not using usemap, since it would make it harder to port your site to a mobile audience.
A better approach (which I personally use a lot and which would work on the design in question) is to make a div with full width and a given height, and to add the logo inside of it.
The HTML would look something like this:
<div class="header">
</div>
The CSS could then look like this:
.header {
background-image: url(...);
background-position: center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 800px;
}
.header .logo {
width: 400px;
height: 300px;
display: inline-block;
background-image: url(...);
background-position: center;
background-repeat: no-repeat;
}
It's something different from your current approach, but would fix your problem with the logo.
EDIT: I've put up a little fiddle about the problem, to give more context in case necessary.