...

View Full Version : element background image won't render



lsargent
02-14-2012, 08:35 AM
I'm trying to create a block quote like in the image below:

http://www.norrislakevillas.com/images/block-quote-sample.png

The quotation marks sit in the bottom right corner of a 50 X 45 px transparent PNG image with 10px of spacing on the top and left.

The element is rendering correctly with the exception of the background image, it just won't show up.

CSS Code:


#block_quote{
float:left;
width:400px;
background:#f7f7f7;
background-image:url(images/quote-top.png) left top no-repeat;
margin:50px 0 100px 53px;
border:1px solid #ccc;
}

#block_quote p{
font:italic 14px segoe ui, arial, sans-serif;
color:#5f5f5f;
line-height:1.4em;
margin:0;
padding:20px 15px 20px 60px;
}


Any ideas why the image isn't rendering?

Thanks

Co1dFusion
02-14-2012, 09:13 AM
You could try moving this "left top no-repeat" to another part (background-repeat) and see what that does

lsargent
02-14-2012, 09:25 AM
Tried that. I even over emphasized breaking down the selectors to each command:



background-color:#f7f7f7;
background-image:url('images/quote-top.png');
background-position:left top;
background-repeat:no-repeat;


All to no avail.

Excavator
02-14-2012, 09:41 AM
Hello lsargent,
Your first bit of CSS is invalid.
It should be more like this -

#block_quote{
float:left;
width:400px;
background: #f7f7f7 url(images/quote-top.png) left top no-repeat;
margin:50px 0 100px 53px;
border:1px solid #ccc;
}
see CSS Shorthand here (http://www.dustindiaz.com/css-shorthand/).



The second one you provide, with each seperate selector, is valid and should work...assuming quote-top.png path and spelling is correct. There also needs to be something in #block_quote to expand it since you don't specify a height.

lsargent
02-14-2012, 09:53 AM
Yeah I had already tried that before your reply, but still won't work. Figured maybe I was putting the wrong image url in there but I haven't. I don't have a height specified because their will be multiple testimonials on the page with varying text lengths, so I wanted that to be open-ended.

This is VERY bizarre and not sure why I'm experiencing this.

The only way i can get it to render is to stick the image within the div within the html, which jacks up the positioning of the text. Uurgh!

lsargent
02-14-2012, 10:41 AM
SOLVED, but not thrilled with the solution. Literally had to create 2 additional elements to squeeze into the parent, one for the bg image, and one for the text.

I have other elements in my css that behave fine with bg images, so not sure what the problem is.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum