Animation Width Compared to Background Image - html

Question

I have a background image that resizes automatically based on screen size. I have an animation that I'm trying to get to do the same thing for consistency. However, the animation doesn't appear to be the same width or won't stretch across the entire screen.
body {
height: 100%;
margin: 0;
padding: 0;
background:url(../img/Ex.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 3rem;
outline-style: solid;
outline-color: #ffcd11;
outline-width: thick;
background-color: #ffcd11;
}
.rain {
height: 100%;
margin: 0;
padding: 0;
background:url(../img/snowfall2.png) center center
fixed,url(../img/snowfall3.png) center center fixed;
animation: rain 1s linear infinite;
}
.rain:before {
content: '';
position: absolute;
height: 100%;
background: white;
animation: lighting 4s linear infinite;
opacity: 0;
}
#keyframes lighting {
0%
{
opacity: 0;
}
10%
{
opacity: 0; position: 0% 0%;
}
11%
{
opacity: 1; position: 20% 100%;
}
14%
{
opacity: 0;
}
20%
{
opacity: 0;
}
21%
{
opacity: 1;
}
24%
{
opacity: 0;
}
104%
{
opacity: 0;
}
}
#keyframes rain {
0%
{
background-position: 0% 0%;
}
100%
{
background-position: 20% 100%;
}
}
<div class="carousel-caption rain">
<!-- <h1>Machine Parts Intelligence</h1> -->
<h1 class="lead">THE NEW MACHINE MODEL INFORMATION EXPERIENCE</h1>
</div>
Keyframes have been added. I haven't quite gotten the lighting effect to work as I want to, but I'm not really concerned about that at the moment. I just want the rain/snowfall effect to be the same width as the background image itself.

Answer 1

I just need to add the following code in my CSS:
.rain {
height: 100%;
margin: 0;
padding: 0;
left: 0;
right: 0;
background:url(../img/snowfall2.png) center center fixed,url(../img/snowfall3.png)
center center fixed;
animation: rain 1s linear infinite;
}
A left and right function took care of my issue and it expanded the width of my website.

Answer 2

It's difficult to know what you were going for without actually having the images or a visual representation of your goal, but this is my best guess as to what you wanted.
The main change I made was to adjust the background-position property within your keyframe to have 50% as the first value, effectively positioning it in the center of the element. Since it's named rain, I also made it fall from above to below.
body {
height: 100%;
margin: 0;
padding: 0;
background:url('https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 3rem;
outline-style: solid;
outline-color: #ffcd11;
outline-width: thick;
background-color: #ffcd11;
}
.rain {
height: 100%;
margin: 0;
padding: 0;
background:url('https://www.ikea.com/gb/en/images/products/euphorbia-acrurensis-potted-plant__0654026_pe708251_s5.jpg') center center
fixed, url('https://media.istockphoto.com/photos/cactus-in-pot-picture-id486466536?k=6&m=486466536&s=612x612&w=0&h=3CJO4XNOcS3WtAdMU4A9TuCbcwxnE9Rr6lHU4GDSwhE=') center center fixed;
animation: rain 1s linear infinite;
}
.rain:before {
content: '';
position: absolute;
height: 100%;
background: white;
animation: lighting 4s linear infinite;
opacity: 0;
}
#keyframes lighting {
0%
{
opacity: 0;
}
10%
{
opacity: 0; position: 0% 0%;
}
11%
{
opacity: 1; position: 20% 100%;
}
14%
{
opacity: 0;
}
20%
{
opacity: 0;
}
21%
{
opacity: 1;
}
24%
{
opacity: 0;
}
104%
{
opacity: 0;
}
}
#keyframes rain {
0%
{
background-position: 50% 100%;
}
100%
{
background-position: 50% 0%;
}
}
<div class="carousel-caption rain">
<!-- <h1>Machine Parts Intelligence</h1> -->
<h1 class="lead">THE NEW MACHINE MODEL INFORMATION EXPERIENCE</h1>
</div>
Let me know if this wasn't what you intended and I'll see if I can adjust it.