Develop Reference

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

Issue with image background and Fullpage.js

I am using fullpage.js and I am trying to add an image background to one of my slides, however when I do so the page 'skips' a section on its own.
My current css for the section is the following:
#slide1{background-image: url(https://github.com/antonettis/fullpage/raw/gh-pages/img/chess.jpg); background-repeat: no-repeat; background-size: auto 100%; }
I compared it to the fullpage.js demo, and if I copy it this is what my code should look like:
#slide1{background-image: url(https://github.com/antonettis/fullpage/raw/gh-pages/img/chess.jpg); background-size: cover; background-attachment: fixed; }
However when I do this the image completely disappears. Here is the codepen. The image is on page 4, slide 1. Thanks in advance for your help.

You need to replace css code with this:
.fp-section{
background-image: url(https://github.com/antonettis/fullpage/raw/gh-pages/img/chess.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
}

How to set a fixed background with CSS?

I've set a fixed background on my website but it's not quite staying fixed when zooming in and out.
This is the site I want to replicate the background from:
http://triangl.com/
Zooming in and out keeps the background completely fixed.
Please see mine:
http://zoeyplayground-com.zoeysite.com/
Zooming in and out will behave differently.
My code is below. This will only set the background on the home page:
jQuery(document).ready(function(){
if (top.location.pathname === '/')
{
jQuery("body").addClass("bodybackground");
}
});
.bodybackground {
background: url('/media/import/background.jpg') no-repeat center center fixed;
}
Could anybody inform me on what could be causing this? Thank you very much for any help.

you need to add background-size: cover;
.bodybackground {
background: url('/media/import/background.jpg') no-repeat center center fixed;
background-size: cover;
}

Use background-size: cover; or background-size: contain; as per your necessity. That should fix it.

CSS - Show Entire Image as Background Without Cropping

I'm trying to setup a div with a background image with some text on top of it. The background image needs to stretch the entire width of the viewport, which I've been able to do successfully. This is my CSS:
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problem I'm having is that it isn't showing the full height of the image. The image is being cropped at the top and bottom. I want the image to show it's full height and the user needs to be able to scroll down to see more content below the image.
Is there a way I can show the full image without cutting the top and bottom off?
Thanks!

Remove the fixed and instead of cover use contain. If you want a specific size though I would define a height in my css.

You can use background-size: auto 100%;
I updated an example in fiddle to see how its looks.
http://jsfiddle.net/4ozmn00t/2/

.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://);
background-size: 100% 100%;
}
setting the width and height of background-size to 100% will fill the div

Remove the fixed from the background.
url() no-repeat center center

jQuery update css values

i have got a little problem with css on my homepage:
if i visit my page from a android device, and i scroll down,
the background image gets a little bit bigger, and if i
scroll up, it resizes again to the correct size.
I think the problem is: i load the pages with jquery's load()
into a div. Then the page size changes, but css still uses the
old size (at dynamic values (100% and cover).)
css:
body {
background: #000000 url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
max-height: 100%;
max-width: 100%;
overflow-y: scroll;
}
If you don't know what i mean: https://www.youtube.com/watch?v=I_ukAfoiqBo look at the background image
What i tried: i have no idea why this is happening (only on android devices) so till now i tried nothing :/
Xorg