Page opacity causing images to be transparent too?

[waynemiller]

Hi Guys,

 

I have updated my CSS to show a background image and set my page to 70% opacity however all of the images on my pages are now also shown as 70% opacity. How do I sort this out?

 

Please see below for altered CSS

 

 

/* ************************************************************************************************

struture

************************************************************************************************ */

#page {background:#fff;

filter:alpha(opacity=70);

-moz-opacity:.70;

opacity:.70;}

 

#header {z-index:10}

#columns {z-index:1}

#left_column {}

#center_column {}

#right_column {}

#footer {}

 

 

/* ************************************************************************************************

generic style

************************************************************************************************ */

body{

font:normal 11px/14px Arial, Verdana, sans-serif;

color:#222;

background: url(../img/background.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

[waynemiller]

I've just realised that in IE8 the images are not transparent so I just need to sort it out in chrome and firefox. However the downside is that the background image has not been stretched in IE8

[waynemiller]

For those of you who may require a fix for this I used

 

#page {background: rgba(255, 255, 255, 0.7);}

 

instead of

 

#page {background:#fff;

filter:alpha(opacity=70);

-moz-opacity:.70;

opacity:.70;}

 

The RGBA got rid of the inherant dependancies

[waynemiller]

I ended up changing it back in the end as I quite liked the transparent look

[waynemiller]

HEEEEEEEEEEEEEEEEEEEEELLLLLLLLLLLLLLLLPPPPPPPPPPPPPPPPP

 

My CSS now looks like this again:

 

/* ************************************************************************************************

struture

************************************************************************************************ */

#page {background:#fff;

filter:alpha(opacity=70);

-moz-opacity:.70;

opacity:.70;}

 

#header {z-index:10}

#columns {z-index:1}

#left_column {}

#center_column {}

#right_column {}

#footer {}

 

 

/* ************************************************************************************************

generic style

************************************************************************************************ */

body{

font:normal 11px/14px Arial, Verdana, sans-serif;

color:#222;

background: url(../img/background.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

 

And of course all of the dependancys are now transparent too.

I want to keep everything transparent on the front page apart from the slider as thats where I want to display some high res images. How do I code this in 1.5.2

 

Its doing my head in