Background image on parent div not displaying

  • Unknown's avatar

    My client doesn’t have the Customization Upgrade so I am trying to achieve this with inline CSS.
    I would like to have a div that expands across the page with a background image. Within this div have two divs floated left and right.
    However, when I put a background colour or image to the parent div it doesn’t display.

    Our values and beliefs are to assist firms in staying on the right side of the regulators.

    Contact us now for a no obligation telephone consultation on 0800 000 0000
    </div>

    Any help would be much appreciated.

    The blog I need help with is: (visible only to logged in users)

  • Hi @earthgripper!

    Because your two child elements are floated, there’s nothing in the div to give it height.

    overflow: auto on the parent div should do the trick:

    <div style="background:url('https://paleseptembercomingsoon.files.wordpress.com/2017/02/banner3.jpg'); overflow: auto;">
    	<div style="width:70%; padding:30px 20pt 30px 10px; float:left; min-height:190px;">
    		<h3>Our values and beliefs are to assist firms in staying on the right side of the regulators.</h3>
    		Contact us now for a no obligation telephone consultation on 0800 000 0000
    
    	</div>
    	<div style="width:30%; padding:30px 10pt 30px 20px; float:right; min-height:190px;"><a class="button" style="text-align:center;" href="https://paleseptembercomingsoon.wordpress.com/contact/">Contact Us</a></div>
    </div>

    Let us know how that works – you’ll likely want to play with the background positioning a bit :)

  • The topic ‘Background image on parent div not displaying’ is closed to new replies.