SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It all depends exactly on the dynamics of that box and whether height or width will be fixed and whether the gradient is a fixed height fading into a background colour.

    The simplest way for a fixed width element is to cap both the top corners in one go with a background image that holds both top corners and the top edge of the graphic.

    Then apply an inner container with your vertical gradient repeated along the x-axis but set a background color to match the finishing color of the gradient.

    Then cap the bottom of the box with the two bottom corner images and bottom edge contained in one image exactly as was done for the top.

    Basically you need three divs (or existing elements if possible) to achieve the above effect.

    You can't have a repeating gradient pattern unless you have a fixed height element because there would be no way to match the bottom corners with the gradient at that point. That is why I suggest having a fixed height gradient pattern that merges into a solid background color and then the bottom corners and bottom edge will be that solid color.

    Hope that makes sense

    You can find more resources here:

    http://css-discuss.incutio.com/?page=RoundedCorners

    and a javscript version here:

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You haven't accounted for the default margins on the h2 and you have also made the element 7px too high because you have added height and padding.

    Code:
    h2 {
        background-image: url(images/main_images/img_rxi_blog_top1.jpg);
        background-repeat: no-repeat;
        text-align: center;
        height: 36px;
        font-size: 16px;
        color: #FFFFFF;
        font-family: "Trebuchet MS";
        padding-top: 0px;
        padding-right: 7px;
        padding-left: 7px;
    margin:0;
    }


Bookmarks

Posting Permissions

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