Support » Developing with WordPress » Developing with background images

  • I can’t seem to get a background image to display. I’ve scoured every forum imaginable.

    
    .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(); ?>
    
Viewing 3 replies - 1 through 3 (of 3 total)
  • Sally

    (@saltennys)

    Try a more specific/targetted CSS selector — i.e. instead of just .jumbotron, you could try one of these:

    #full-width-page-wrapper .jumbotron

    .site-main .jumbotron

    #main .jumbotron

    If that does not work, perhaps you should share the page URL.

    Background images are just that…they display in the background of a container. In your case, the “jumbotron” container appears to have no height nor width. An empty container == no background image!

    Try this in the CSS:

    
    .jumbotron {
    	width: 100%;
    	height: 200px;
    	background: url("/img/midwestroof.jpg");
    }
    

    Do you now see your background image? If so, then you can adjust the CSS to make the image appear as required. If not, then make sure the image URL is correct; as defined in your CSS, the image is outside the WordPress installation.

    @diondesigns thanks! It’s small wins like that which keep me going! Sometimes I want to pull my hair out.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.