How to resize background image with CSS/JS - javascript

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

Related

CSS Zoom effect on load - hide DIV/Image loading latency

I have a web site with a lot of images, I already have lazy-loading but I wish to add some
effects when the images loads
I was looking to reproduce the "zoom" effect when the image is "loading", something like here:
https://masonry.desandro.com/
Please, have a look at this one:
https://tympanus.net/Development/GridLoadingEffects/index8.html
You will notice that there is no effect when the image are already loaded.
I try to hide the 'load latency' when loading an image from the server.
Maybe the animation is not the right trick!
The goal is to have the load softer, now it loads like any image, but the effect is not very nice.
(you can check www.socloze.com for review).
Do you think we can do this in pure CSS (without JS)?
You can add initial animation:
.img-anim {
width: 100px;
height: 100px;
background-image: url('https://lh3.googleusercontent.com/proxy/Dv3m6UV5rC0KL0or-iOT-6i1I4i4I3CXNh-XU0WZ5-yG_vbYme6A8NhIasiwLon0td1DGbVFBDOEwi3LK7gegowFkjQEiJpPBg');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
animation-name: scale-in;
animation-duration: .4s;
}
#keyframes scale-in {
0% {
background-size: 0%;
}
100% {
background-size: 100%;
}
}
<div class="img-anim"></div>
You can create initial animation usings css but thats as far as u go, if you need things to pop up as you scroll down then check AOS

How to change the height of the HTML5 canvas sketchpad?

I use the Responsive Sketchpad - demo and Github. The only thing I changed is add background image, so I added this CSS:
.canvas {
background-color: transparent;
background-size: cover;
background-image: url(example.jpg);
}
But my problem is with height. What is the proper way to set the height of that canvas box and keep background image responsive? For example how align the height of canvas box (with background image) to the height of right box (with buttons) in demo?
add a element in css and it will surly works:
.canvas {
background-color: transparent;
background-size: cover;
background-image: url(example.jpg);
height : 100% / 100vh;
}
make height component

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.

Setting background size (of image) for a "scrolling" page

So i'm having the trouble that if I have a "long" webpage (where you make your window as big as you can but still need to scroll) the image doesn't "behave" correctly.
I thought that setting the background-size property to cover would do this but is the image isn't big enough (Which would have to be pretty big) I just get white space once I scroll down the page a little bit. Is there a property that would, say, set the height of the background to 100% then properly scale the image so it has the correct width proportional to the original height?
My solution as of now is having a background color that the image "eases" into, just to make it look smooth.
Try to use
html,body {
background: url(yourImg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Or if image isn't big enough, use a background color as well`
background: #6DB3F2 url('yourImg.jpg');
Try using background-size: 100% 100%; property.
But that will stretch your image.
If you want to add background to the full webpage then you can add background-image:(''); property to body.
e.g.
body{
background-image:url('http://backgrounds-free.com/highresolution/l_086.png');
background-repeat:none;
background-size: 100% 100%;
}

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

Categories

Resources