Help with transparency and positioning

[RatPhoto]

Howdy:

I'm a new user of SmugMug and I've been trying to customize my site.

http://ratphoto.smugmug.com/

I'm having two sets of problems currently:

1. I want my background image to stay fixed which is working. However, I want the background colors of the various boxes like the bio box to be transparent so that it will show through everything but the actual content. I thought you could use background-color: transparent but it doesn't seem to work. How would you do this?

2. I want the portraitContainer to be all the way to the left instead of centered. I would then like to put text to the right of it. An example of what I want is here:

http://photoscapedesign.smugmug.com/

I would also love to put the little thumbnails into a table similar to the site above too. All my attempts at this have been dismal failures.

Thanks in advance for any help!

[Mike Lane]

1) You've got this in your CSS:

/* Change box tops and bottoms to be background color. */
.boxTop,
.boxBottom { background: #232323;}

It's that background color that is causing you problems. Try this:

/* Change box tops and bottoms to be transparent. */
.boxTop,
.boxBottom,
#bioBox,
#galleriesBox { background: transparent;}

I added the #bioBox and the #galleriesBox so they would change from lighter gray to transparent. You may have to add other elements to that.


2) Add the red:

#PortraitContainer {position:relative; width:400px; height:400px; background:#000
url(http://ratphoto.smugmug.com/photos/73847918-S.jpg);
border:0px solid #000; margin:0 auto; background-position: 0px 100px; float:left;}

[RatPhoto]

Thanks for the help Mike. :clapThat is exactly what I needed.

I had tried the transparent modifier but didn't have the #bioBox and #galleriesBox. That made the difference.

The float:left thing seems pretty obvious in retrospect. But my knowledge of CSS before I started this was pretty slim to none.