Grow your CSS skills. Land your dream job.

background question??

  • # May 30, 2008 at 12:18 am

    I have a page set up like this:

    =================================================
    ==================== Header ======================
    =================================================

    ================== Navigation =====================

    ==Left-col == ======= Middle-col ======= == Right-col ==
    ==Left-col == ======= Middle-col ======= == Right-col ==
    ==Left-col == ======= Middle-col ======= == Right-col ==
    ==Left-col == ======= Middle-col ======= == Right-col ==
    ==Left-col == ======= Middle-col ======= == Right-col ==

    where the left div, middle div and right column divs are all contained in a "content" div.

    Can a content background image be specified in the content div that will show
    through whatever content is contained in the 3 columns? Right now, nothing shows
    through when I specify a background image on the content div.

    Al

    pab
    # May 30, 2008 at 12:40 am

    do you have a link to a page?

    or could you post the code ?

    # May 30, 2008 at 12:37 pm

    link to page:

    http://www.stthomascurlingclub.com/template.html

    how do I get the background curling circles to show as a background to the content div?

    looks to me like the left-col, middle-col and right-col divs override the background image
    and it does not show up. in this case, I would like the image to show up underneath the
    right column and extend into the middle column.

    Al

    # May 30, 2008 at 1:46 pm

    Using filter: alpha…works (found it at this link http://www.w3schools.com/Css/css_image_transparency.asp

    used

    Code:
    filter: alpha(opacity=xx)

    for IE

    and

    Code:
    filter:alpha (-moz-opacity:xx (decimal))

    for other browsers

    Code:
    #content {color: black; background:url(bkgd.gif) top right no-repeat;}

    #left-col {float: left; width: 140px; font-size: 14px;}
    #left-col ul {list-style: disc inside;}
    #left-col ul li {display: block;}

    #middle-col {float: left; width: 580px; margin-left: 20px; filter: alpha(opacity=50; -moz-opacity:0.50;}
    #middle-col h3 {text-align: center; margin-bottom: 10px; font-size: 17px; font-style: normal;
    color: black; border-bottom: 2px solid #8B0000;}

    #right-col {float: left; width: 200px; margin-left: 20px; font-size: 14px; filter: alpha(opacity=50); -moz-opacity:0.50;}

    seems to work.

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

You must be logged in to reply to this topic.

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