css coding question

[Eric]

I don't know if this belongs in "web design" or "graphic design" but here goes:

What's the best way to code a background rectangle that's semi-transparent AND has rounded corners, that's laying over an image? I realize I could slice it so the rectangle and bkgrd image are a single image, but I'd like to have it repeat vertically so I can adjust content size and keep file small.

 

[bret]

This is web design, not graphic design, for category.

This link my help:
http://www.w3schools.com/Css/css_image_transparency.asp

 

[Eric]

Great, thanks for the link. Now, is there a way to make it expandable with rounded corners? Maybe I have to settle for square corners, cause I really like the look of transparent background rectangles.

 

[PixelPusher]

Eric are you trying to put a semi-transparent box over an image? The rounded corner style will be more difficult to achieve than the square corner style, if you want the box to be dynamic--able to stretch based on the content within.

My suggestion is...stick with the square corner unless the rounded is absolutely necessary.

I have an example of this one sec...

 

[PixelPusher]

Here you go, this is using all CSS and the square corner style. You will need to sub an new image for "bgimg"

CSS

body {
background-color:#222;
}
div.bgimg {
background-image:url(Forest.jpg);
width:1024px;
height:768px;
margin:auto;
position:relative;
}
div.container {
width:200px;
height:500px;
padding:0;
border:1px #fff solid;
position:absolute;
z-index:1;
left:30px;
bottom:30px;
}
div.transbox {
background-color:#fff;
opacity:0.3;
filter:alpha(opacity=3);
width:100%;
height:100%;
padding:0;
margin:0;
position:absolute;
top:0;
z-index:1;
}
div.container p {
text-align:left;
font:normal 9pt Arial, Helvetica, sans-serif;
color:#fff;
padding:20px;
margin:0;
position:relative;
z-index:2;
}

Markup

<div class="bgimg">
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non quam nec purus iaculis laoreet. Nunc eget dui quam. Nam sed erat non nisl sodales mollis nec malesuada nisi. Etiam mattis lorem id magna vehicula gravida. Sed elit mi, pretium ut posuere quis, egestas at ligula. Suspendisse ac augue a enim lacinia varius. Nulla ultrices leo eu lectus mattis nec mattis odio lobortis. Aliquam neque massa, aliquam sit amet venenatis sed, ultrices ut mauris. Morbi placerat commodo velit, vitae semper augue gravida non. Pellentesque auctor blandit mi, in scelerisque purus eleifend in. Vivamus varius est vitae eros mollis eu lobortis massa aliquet.</p>
        <div class="transbox">&nbsp;</div>
    </div>
</div>

 

[stafford_web]

Hi Eric,

I would personally create a image and the cut it up and save it a transparent png. Then you could easily get your desired look. The code below is what i have just wrote and is not tested. Don't forget to use a png fix for IE 6. If you have any bugs please check out my web page that has got a few IE 6 bug fixes.
IE 6 bugs

<div id="background_repeat">
     <div id="top_corners">
           <div id="bottom_corners">
                Add you content here
            </div>
     </div>
</div>

CSS:
#top_corners{
 width:200px;
 background:url(image.jpg) top left no-repeat;
}

#background_repeat{
 width:200px;
 background:url(image_repeat.jpg) top left repeat-x;
}

#top_corners{
 width:200px;
 background:url(image.jpg) bottom left no-repeat;
}

Hope this helps