I have a background image module set-up but the image behind the video is not showing up as a background image. If I remove display none the image shows but only as an image and not as a background image.
http://cloud.baass.com/cconnect2018-v4?hs_preview=QRXMZRIf-5952730153
give us a screenshot of which section you’re referring to. It’s a large page.
Here is a screen shot of the page and of the template. And Here is the css from the external style sheet. http://cloud.baass.com/cconnect2018-v5?hs_preview=PhOHeaPb-5954426036
/* Video Background Image Banner */
.video-banner .color-overlay {display:none;}
.video-banner{
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
padding: 100px 30px 80px 30px;
position: relative;
min-height: 660px !important;
}
.video-banner-image{
display: none !important;
}
.video-banner .color-overlay{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .3);
z-index: 99;
}
.video-banner-text{
color: #ffffff;
position: relative;
z-index: 100;
}
.video-banner-text h1,
.video-banner-text h2,
.video-banner-text h3,
.video-banner-text h4,
.video-banner-text h5,
.video-banner-text h6,
.video-banner-text p {
color: #ffffff;
}
.video-banner-text h1{
font-family: {{ webFont1 }};
font-size: 57px;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 700;
margin: 0px 0px;
}
.video-banner-text h2{
font-size: 42px;
font-weight: 700;
}
.video-banner-text h3{
font-size: 30px;
font-weight: 700;
}
.video-banner-text p{
font-size: 18px;
}
.video-banner-text .cta_button{
display: inline-block;
background-color: {{ accentColor1 }};
color: #ffffff;
font-size: 18px;
padding: 11px 24px;
font-family: {{ webFont1 }};
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
{{ transition("background-color .1s 0s ease-in-out, color .1s 0s ease-in-out") }}
}
.video-banner-text .cta_button:hover{
background-color: {{ accentColor2 }};
}
Could you just add the following CSS?
.video-banner {
background: url(https://cloud.baass.com/hs-fs/hubfs/BAASS.com_/BAASS%20Connect/BAASS_Connect_2018/BG-IMG-02.jpg) no-repeat;
background-size: cover !important;
background-position: center center;
}
If this answer helped, please, mark as solved 
tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.
Drop by and say Hi to me on slack.
Thanks. It worked. I was hoping to get it working without code so it would be changable in the page editor but for now this works. Thanks a bunch!
Hi,
I have the same problem but with Hubspot free theme Skyline_HubTheme, none of the Background images show up.
I am not a programmer,
Here is what the javascript code shows:
/**
* Set Banner Image on Homepage
*/
// Grab the SRC of the Background Image module uploaded image
var bannersrc=$(".background-image").find("img").attr("src");
// Apply the src as the background image for the banner area
$(".banner-background").css('background-image', 'url(' + bannerSRC + ')');
/**
* Set Services Image on Homepage
*/
// Grab the SRC of the Background Image module uploaded image
var servicesBannersrc=$(".services-image").find("img").attr("src");
// Apply the src as the background image for the banner area
$(".home-service-background").css('background-image', 'url(' + servicesBannerSRC + ')');
And here is what the CSS code shows for the banner:
/* Homepage */
/* banner background */
.banner-background {
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
min-height: 442px;
}
.banner-background .background-image {
display: none !important;
}
.banner-background h1 {
margin: 0 0 10px 0;
padding: 0;
font-size: 42px;
color: #07617D;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
line-height: 58px;
}
.banner-background .headline {
background-color: rgba(0,0,0,0.4);
padding: 18px;
color: #fff;
margin-bottom: 10px;
text-transform: uppercase;
font-size: 28px;
font-family: {{ webFont1 }};
}
.banner-background .icon {
line-height: 1.2;
text-align: center;
position: absolute;
width: 100%;
}
and CSS for the Services background:
/* our services */
.home-service-background {
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
font-size: 14px;
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
}
.home-service-background .services-image {
display: none !important;
}
.home-service-background h3 {
color: {{ accentColor5 }};
}
.home-service-background h2 {
color: #fff;
text-transform: uppercase;
font-size: 52px;
line-height: 56px;
padding-bottom: 40px;
margin: 0;
}
.home-service-background .icon {
text-align: center;
}
.home-service-background .icon .fa {
font-size: 70px;
padding-top: 40px;
}
Does anyone know what is that I need to fix to show both images?
Thanks
Need a little more info on what you’re trying to achieve here but from what I see, you’ve dropped an image in to be used as a background but included it as a block level element.
You either need to adjust your module to have the image as a background image (assuming this is a custom module) or adjust the current code with css to position it beneath the content using position: absolute and such to take it out of the DOM structure then resize it to fill the parent container element.