Background Img doesn't display

Has anyone ever had an issue with a background image not displaying? It’s not the first time I’ve had a problem and I can’t figure out why.

.jumbotron {
    background: url("/img/midwestroof.jpg");
}
<div class="wrapper" id="full-width-page-wrapper">

	<div class="<?php echo esc_attr( $container ); ?>" id="content">

		<div class="row">

			<div class="col-md-12 content-area" id="primary">

				<main class="site-main" id="main" role="main">

					<div class="jumbotron">
                    
                    </div>

				</main><!-- #main -->

			</div><!-- #primary -->

		</div><!-- .row end -->

	</div><!-- Container end -->

</div><!-- Wrapper end -->

<?php get_footer(); ?>

Do you have any content in the jumbotron div to expand it open enough to see a bg image.

If not set a test height on it to check that bg image is showing

Post a link to the site if you can, we can’t debug images.

Edit: If that’s the div your showing in your image then, yes you should be seeing the bg image with that content expanding it

Are other BG images working on your page?

Is your file path to the BG image correct?

http://lakeozarkelectrician.com/

I’m not sure :confused:

The page template I’m working with is in one folder called “page templates”, then the image i’m trying to pull from is in the img folder in the same root as page templates, if that makes sense.

Well your background color is showing up, but I see no BG image applied to that div.

.jumbotron {
	padding: 2rem 1rem;
	margin-bottom: 2rem;
	background-color: #e9ecef; 
	border-radius: .3rem;
}

This is where that css file was found
http://lakeozarkelectrician.com/wp-content/cache/autoptimize/css/autoptimize_fcb7a85dc410e0f3f787cd9b222657f0.css

Do a search in your browser on that css file EDIT>FIND >jumbotron and you will find the styles I posted above.

I see that it is a WordPress site and it uses Bootstrap, neither of which I work with.
I know Bootstrap has certain rules you have to follow and the same with WP.
Not sure, but you should be able to set up your own css file that overrides the default styling of your template/theme.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.