poet

Thank you so much! I'd seen someone state you could do both, but their code had the values comma separated and it wasn't working. Now fully resolved. Thanks again.

An alternative solution might be to just place the robot.png in the div as an <img> but then I can't get that to align to the bottom right of the div and have looked all over for a working solution.

Hi. Yeah, if I change #topleftcontent to just #topleft (overwriting the background color) I get: So the image works and places correctly, I just need to combine the background colour of #topleft with an overlayed image in #topleftcontent.

Visual helper: The small box in the top left is the nav area. #topleft and #topright are floated left, then a clear and #bottomleft and #bottomright floated left again.

Hi, thanks for the reply. No, it has a h2 and a p which display and position fine. Its a square layout with 4 equal sized boxes that resize. To make them fill the browser I set the "topleft" etc Divs to 100% and put the content in the "topleftcontent" divs so I could add margins etc without breaking the layout.

Hi. I'm trying to get both a background image and background colour to show in a div. I wrapped the div within another div to try to overlay a transparent png, but the image doesn't show. html: <div id="topleft"> <div id="topleftcontent"> <h2>Home</h2> <p>Lorem Ipsum</p> <p>Lorem ipsum dolor sit amet</p> </div> </div> css: #topleft {background: #E65540; width: 50%; min-height: 50%; float: left; } #topleftcontent {background: url(../images/robotwaving.png) bottom right no-repeat;} I want the image to be aligned to the bottom right of the div, and couldn't find a way to do that putting it as <img> in the html. All ideas welcome. Thanks.