Forums

al_m473

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

do you have a link to a page?

or could you post the code ?

al_m473

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

Nodster

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

used

filter: alpha(opacity=xx)

for IE

and

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

for other browsers


#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.

treehouse : what would you like to learn today?

Forums

background question??