Grow your CSS skills. Land your dream job.

Noob bg image question

  • # February 9, 2009 at 9:40 pm

    Hi,

    I’m working on a rounded corner box, but I’m having trouble getting the middle part of my box to display.

    You can see it at http://craigcurry.com/menu/blog.html. I think I may be not quite something in regards to the cascade/specificity or too many background images, but I’m not sure.

    Any help would be greatly appreciated.

    Thanks,

    Craig

    # February 10, 2009 at 2:08 am

    wrap a div around the paragraph and apply a bg to that div it will work

    # February 10, 2009 at 4:57 am
    "CraigC" wrote:
    Hi,

    I’m working on a rounded corner box, but I’m having trouble getting the middle part of my box to display.

    You can see it at http://craigcurry.com/menu/blog.html. I think I may be not quite something in regards to the cascade/specificity or too many background images, but I’m not sure.

    Any help would be greatly appreciated.

    Thanks,

    Craig

    as ramesh said, you need to associate a background image to that block of code.

    ok, you have done the right thing with the top and bottom of the block in assigning the images (but maybe not perfect in all browsers)

    but you need one thing to wrap around the text and assign a background image to that, which is indeed a div.

    best thing to do is make your image the same width but 1px height.

    good luck

    Rob
    # February 10, 2009 at 5:01 am

    This is something everyone does now and again… check below

    Code:
    .blog_box_top {
    background: url(images/blog_bg_mid) center repeat-y;
    text-align: left;
    margin:10px 0;
    width: 647px;
    }

    .blog_box_top h3, p {
    background: url(images/blog_bg_mid) center repeat-y;
    text-align: center;
    margin: 10px 10px;
    }

    Notice you missed off the file extention… blog_bg_mid.png

    Also you have not specified the correct path. it should be ../images/blog_bg_mid.png

    After fixing that – I can say that it still dosnt work properly – what I would recommend is stucture it either within 3 blocks like this:

    <div class="boxtop"> </div>
    <div class="boxmid"> <h2>Title for interesting stuff</h2> <p>interesting content</p> </div>
    <div class="boxbot"> </div>

    Set the background image of the div class’ boxtop and bottom with the corner sections you have, and dont link them in with the <img> tag. then set the background image of your boxmid class with the blog_bg_mid.png.

    If you wanted to try something easyer you could have a single box and use the rounded corners JS code – you can find that here: http://malsup.com/jquery/corner/ There are many others, google just gave me that one first.

    most browsers support a rounded corner css code – except of course IE…

    There are many ways to achieve it, here are some useful tutorials.

    http://www.cssjuice.com/25-rounded-corn … -with-css/

    The site is coming on well! keep going! :D

    # February 10, 2009 at 1:40 pm

    Thank you all for the help! That put me on the right track and I was able to fix the problem. And thanks for pointing out the missing .png and the path mistakes also. That’s one of those things that you can be staring right at and never "see"! (or at least I can…) This forum is such a help to me.

    # February 10, 2009 at 1:42 pm

    And thanks Rob also for the encouragement to keep going… I needed that.

    Rob
    # February 10, 2009 at 5:37 pm
    "CraigC" wrote:
    Thank you all for the help! That put me on the right track and I was able to fix the problem. And thanks for pointing out the missing .png and the path mistakes also. That’s one of those things that you can be staring right at and never "see"! (or at least I can…) This forum is such a help to me.

    And thanks Rob also for the encouragement to keep going… I needed that.

    hehe – yea we all do it – its like you become code blind "Why isnt it working!!!" then you end up feeling really stupid lol – well I do atleast :)

    We all need encouragement :) Plus with that site you will be teaching one of the most precious things on the planet!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".