responsive div background, but no repeat

Question

I'm trying to make this div background to act as a normal 100% image and scale the same way.

My CSS:

.videobackground{
margin-top:-5px;
max-width:1140px;
height:348px !important;
background-image:url(imgs/rpp-behind-the-scenes-hero2bg.jpg);
background-position:center; /* IE fix */
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}

My HTML:

<div class="videobackground"></div>

Here is my issue on desktop it's looking perfectly fine.

Desktop Picture:

But as soon as I start to scale the page this happens.

Mobile Picture:

Any suggestions will be greatly appreciated, I feel like I've tried just about everything. And the reason I'm using a div background as opposed to just an image, I'm overlaying a youtube embed over the left side of the div.

Thanks so much!

Adam.

Answer 1

You could add

background-repeat: no-repeat;

To your css.

So it looks something like

.videobackground{
margin-top:-5px;
max-width:1140px;
height:348px !important;
background-image:url(imgs/rpp-behind-the-scenes-hero2bg.jpg);
background-position:center; /* IE fix */
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
}

Also here's a great link on getting full container backgrounds. https://css-tricks.com/perfect-full-page-background-image/

Also as a side note you could use short hand and combine all your css properties.

  background: url(imgs/rpp-behind-the-scenes-hero2bg.jpg) no-repeat center center fixed;