Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts

    element background image won't render

    I'm trying to create a block quote like in the image below:



    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:
    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

  • #2
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    77
    Thanks
    0
    Thanked 12 Times in 11 Posts
    You could try moving this "left top no-repeat" to another part (background-repeat) and see what that does

  • #3
    New Coder
    Join Date
    Aug 2009
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Tried that. I even over emphasized breaking down the selectors to each command:

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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello lsargent,
    Your first bit of CSS is invalid.
    It should be more like this -
    Code:
    #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.



    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Aug 2009
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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!
    Last edited by lsargent; 02-14-2012 at 09:14 AM.

  • #6
    New Coder
    Join Date
    Aug 2009
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •