Jump to content

Page opacity causing images to be transparent too?


Recommended Posts

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;

}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :(

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More