We Keep Coding

CSS How to keep the section filled with a background image after the position transform

I wanna keep the section filled with a background image after the position transform.
Using this code I get a white background from the body element.
<section><div class="firstpage"></div></section>
.firstpage{
position: absolute;
background-image:url('https://i.ibb.co/HGSY9Rv/bcb.png');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height:100%;
width:100%;
}
$(".firstpage").mouseenter(function(){
$(".firstpage").animate({
'background-position-x': '-200px',
});});
$(".firstpage").mouseleave(function(){
$(".firstpage").animate({
'background-position-x': '0px',
});});
https://codepen.io/gamegame/pen/NWMpJvy

make the bg image bigger in the width by using a calculation
the calculation is created by using native CSS calc()/var()
basically, we add the length of the animation to the width
so it will always overflow,
and this is correct since we have a calc() (so it is responsive)
so the animation works fine always bigger and smaller display
100% + 200px
(let's say if the width of your device is 550px, now this calcolation will be 550 + 200 = 750)
and there isn't any need for javascript for animation
because with :hover we can do the same / and transition
code example:
body {
margin: 0;
overflow:hidden; /* for not see the scrollbar */
}
.firstpage {
--x: 200px;
position: absolute;
background-image: url("https://i.ibb.co/HGSY9Rv/bcb.png");
/* not use `attachment: fixed` here */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: calc(100% + var(--x));
transition: background-position-x 0.5s ease-in-out;
}
.firstpage:hover {
background-position-x: calc(var(--x) * -1); /* 200px * -1 = -200px */
}
<section>
<div class="firstpage"></div>
</section>

Make Tween Animating Lines From Inside Out

I have an image of lines, as depicted in the small photo below, that I would like to animate with a Tween to make it appear as though it is being drawn from the middle outwards.
I have come up with a good way of doing this, at least theoretically. I have set up my image dimensions and absolute position to be where I want it at the end. I have contained it inside a small absolute positioned div with auto margins and zero width/height that increases with a Tween, so that it expands outwards from the middle slowly and therefore as the container expands it looks like the image is being "drawn" outwards.
However, I have a problem, as demonstrated by the image below. The lines image is positioned relative to the containing div, in the centre, rather than the body (and I understand that this is because they are both absolute positioned). How do I position the child element in the container relative to the body rather than the container, without removing it as a child (there are other layers of my background that would be covered by this div expanding)?
Here is my code:
<div id='cover'><div id='child'></div></div>
CSS:
#cover {
background-image: url('/images/slide21/bg_layer3.png');
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: none;
height: 46vh;
width: 78.5vw;
z-index: -8;
position: absolute;
top: 0vw; // these are coordinates that should
right: 0; // be positioned relative to the
left: -0.5vw; // body not container
opacity: 1;
}
#container {
width: 0; // as animation occurs, width and
height: 0; // height increase to 100%
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
overflow: hidden;
z-index: -5;
opacity: 1;
}
Thanks.

How to make two images equal height and keep it on resize

I am trying to make two images which are placed in two floated divs equal height. Both images takes 100% of the page width, but their ratio is 60/40% and I want to kept it like that on resize. So again:
2 images, different height, want to make it same height, I do not care about the width (I will hide it), and ratio stays the same on resize.

Declare the images in the CSS as background images and give them a size of cover. In the example below I used the background: shorthand.
See the example in this fiddle.
.container {
width: 100%;
height: 200px;
background-color: #eee;
}
.foo, .bar { height: 100%; float: left; }
.foo {
width: 60%;
background: url("http://url.com/image.png") no-repeat center top / cover;
}
.bar {
width: 40%;
background: url("http://url.com/image.png") no-repeat center top / cover;
}

Background cover while page resize

My page has some animations that sometimes change the page height (on purpose), so initialy when the page is loaded and page height is 100%, the background image covers the page.
But when it runs the animations, the page height can go beyond 100%. The only way to effectively cover all the background is to change background height from auto to a bigger value (e.g. 200%), but doing so i am also changing the page height. In other words, is it possible to cover (dynamically) the page when the animations are running while keeping page height at 100% when animations are not running?
my css code for the background:
background: url(background2.jpg)repeat 5% 5%;
position: absolute;
background-size:cover;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 400;
height: auto;
width: auto;

$(document).ready(function(){
var isAnimating = $("#someid").is(':animated');
//will return true if selected element animating
if(isAnimating == true){
$('#div').css('height','value');
}
else{
$('#div').css('height','value');
}
});

background: url('') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=60);/* For IE8 and earlier */
width: 100%;
height: 100%;
overflow: hidden;
hi friends apply this css

Calculate apsect ratio width based on height

I have an inline img that is 1280(w) x 1024(h) and is contained within a div. The divs dimensions are set 100%(w/h) of the viewport with overflow hidden.
I want to use the image as a fullscreen background and require that it fills the viewport completely regardless of dimensions with no borders showing. It must keep its aspect ratio and I would also like the image to be centered at all times. I am aware that to achieve this some of the image will be cropped.
I believe if make the image height match the viewport height and calculate the width based on the images aspect ratio this will work but I am unsure how to do this. Can anyone help?
Many thanks in advance.

Use backstretch http://srobbin.com/jquery-plugins/backstretch/
$("#demo").backstretch("http://urltoimage.jpg");'
set #demo to 100/100% width and height

If you're not 100% glued to using an img tag, you can do the following:
HTML
<div id="background"></div>
CSS
#background {
background: url('path/to/img.jpg');
background-size: cover;
background-position: center center;
width: 100vw;
height: 100vh;
}

Not really an answer to your question but a potential alternative -- have you tried the min-height/min-width CSS properties?
HTML:
<div class="container">
<div class="image-wrapper">
<img src="..." />
</div>
</div>
CSS:
.container {
width: 100vw;
height: 100vh;
background-color: grey;
}
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.image-wrapper img {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
}
Fiddle: https://jsfiddle.net/mkjoyep1/
In the example, .container (your full width/height div), fills the page width vw/wh and the .image-wrapper has its width/height set to 100% which will match the parent's width and height. With overflow: hidden acting as the crop mechanism you can then stretch your image to fill it's container. I've positioned the image in the center with the method explored here.
This appears to work for me on Chrome and Firefox.
*Edited to include html/css