Alignment issue / transparent layers

Shawn Northrop

I have built a layout for a website in photoshop and am having trouble turning my idea into an actually site. I have a repeating background image, It is a floral pattern with a light grey color to it. In the middle of the page i have a box (all of my content is inside). The box is a light blue transparent color and the floral pattern continues through this box. It simply changes the color of the floral pattern.

I created two images:
1) the repeating background image
2) the light blue flowery box.

I used the bg as as the background for my body. I now am stuck trying to figure out how to align my box ontop of the background. I also need this box to be centered on the page.

Is there a way to use a transparent light blue for my table or div background rather than the image of the light blue flowers?

Any thoughts we be appreciated.
Thanks,
Shawn

drhowarddrfine

If I understand you right, this will work in modern browsers. But that leaves IE out of the picture since it doesn't work well with modern code. See below.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8">

<style type="text/css">
html,body{height:100%;width:100%}
body{
background-color:#aaa;
}
div{
background-color:#cfc;
height:200px;width:200px;
opacity:0.5;
margin:0 auto;
}
</style>

</head>
<body>

<div></div>

</body>
</html>[/HTML]

For IE, you have to use their non-standard 'filter' stuff which I haven't messed with in a long time and my quick attempt didn't work. Here's a link that can help but forget all the mention of '-moz' stuff. The article is a little old and 'opacity' is in full use now, except for IE.

Shawn Northrop

its something to play with thanks.

tburger

You can center a box using this general method:

1. Position the box absolutely.
2. Set the left: attribute to 50% (i.e left:50%;)
3. Make the left margin of the box the negative value of half it's width.

Let's say we have a box that is 100px wide. If we position it using left:50%, the left edge of the box will be in the middle of the browser window. This is obviously not centered because we want the middle of the box to be in the middle of the viewing area. To achieve this, we now take half of the box's width (50px;) , and set the box's left-margin to the negative of this value.

#thenameofyourid{
position:absolute;
left: 50%;
margin-left: -50px;
}

That should take care of you horizontally.

You can do the same thing vertically by setting top:50% and making the the top margin the negative value of half the box's height.

Hope this is clear

Tom

tburger

After reading your post again, Shawn, I'm not sure that the aforementioned positioning technique is what you were looking for. You're probably more concerned with seamlessly incorporating your floral background pattern.

I have not personally dealt with the opacity attribute mentioned in this thread. I have tried the -moz opacity attribute, however, and I do have some words of caution. If you use this attribute, not only will your box change opacity, but so will the box's text. This may not be what you want style wise.

The other option of course is to create a transparent box in a program like Fireworks (what I use) or Photoshop (which I have never done). If you know the permanent size of the box, this might be the best option because it will pick up whatever background pattern is already there.

Tom

jimberry

Another take on this is to use two (or even more) versions of the same background image, with background-attachment: fixed;
This is described by Eric Meyer in his complex spiral demo
I think this didn't work in IE6, but it appears to be one of the (few?) CSS compliance issues that has been fixed with IE7.

Alignment issue / transparent layers

re: Alignment issue / transparent layers

re: Alignment issue / transparent layers

re: Alignment issue / transparent layers

re: Alignment issue / transparent layers

re: Alignment issue / transparent layers

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about