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.

is the #topleftcontent Div empty? I think you may have to state a size if so, otherwise it'll just collapse.

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.

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.

Edited August 29, 201115 yr by poet

Is the link to your img correct

 

have you got a link?

Edited August 29, 201115 yr by mteam

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.

Edited August 29, 201115 yr by poet

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.

I haven't fully understood the issue, but you realise you can have an image and a colour:

 

background:url(/wherever/whatever.png) #E65540 bottom right no-repeat;

 

I may be missing the point here, but at a brief look...this was the obvious answer.

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.