web design help

pjwhite99

Hi

can someone tell me what is the css i need to put in my style sheet

i have a background image and were i have my bannor i want the bannor background opacity to let you see the image behind it i need to turn the opacity down

also dose anyone know how i can make rounded sides whats the code i need i think its border-radius something

thanks

ivanc

pjwhite99 wrote: »

i have a background image and were i have my bannor i want the bannor background opacity to let you see the image behind it i need to turn the opacity down

Can you post a link?

sf80

pjwhite99 wrote: »

Hi

can someone tell me what is the css i need to put in my style sheet

i have a background image and were i have my bannor i want the bannor background opacity to let you see the image behind it i need to turn the opacity down

also dose anyone know how i can make rounded sides whats the code i need i think its border-radius something

thanks

http://www.w3schools.com/css/css_image_transparency.asp

http://www.w3schools.com/cssref/css3_pr_border-radius.asp

the border radius is CSS3 though, so you're looking at only having support in more recent browsers (IE9+, Firefox 4+, Chrome, Safari 5+, and Opera)

pjwhite99

when i use this in the wrapper div

/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;

it brings everything inside the wrapper div down is there any way i can just bring the backgroung colour of the wrapper div down instead of the hole div down its just the bg colour im trying to bring down

something like this site this idea http://www.theflexstudio.com/

you may need to refresh the page a few times to get the right back ground the bg with facebook logo and all

site designer

pjwhite99 wrote: »

when i use this in the wrapper div

/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;

it brings everything inside the wrapper div down is there any way i can just bring the backgroung colour of the wrapper div down instead of the hole div down its just the bg colour im trying to bring down

something like this site this idea http://www.theflexstudio.com/

you may need to refresh the page a few times to get the right back ground the bg with facebook logo and all

You need to open the graphic in photoshop, change the opacity where you need, and save as PNG, last bit is important.

pjwhite99

its not the graphic i need turn down its the colour of the background of my wrapper

i have the graphic in as a background image in the body

the wrapper sits on top of this so i need to turn the opacity of the wrapper down so the image shows through

i seen this in dreamweaver cs5.5 but i dont have it so i would need to know the code here is a video were i seen it

http://www.youtube.com/watch?v=UjvhZRILn3I

go to 1.45 on the time would someone know what code you would use to do what he done in dreamweaver????????

thanks for the replys

cormee

What site designer is suggesting is correct. Transparency is inherited, so if you use a div and assign it a transparency everything else within that div will inherit the transparency.

So to get around that issue site designer is telling you to use a transparent .png (important to use png as this format as it supports alpha transparency) instead of a transparent background hexadecimal colour. That way no transparency is specified in your CSS, so none is inherited.

To summarise - use a transparent background image instead of a transparent background colour.

Giblet

There are multiple ways to do this.

Transparent PNG using filter nonsense for IE.
Absolutely positioned div on the same space as the content with opacity set. (Horrible code below)

<div style="position:relative">
    <div style="opacity:.6; position:absolute;top:0;left:0;height:100px;width:100px"></div>
    <div>My content</div>
</div>

or with latest hotness.
background-color: rgba(127,127,127,.6);

pjwhite99

Giblet wrote: »

</div>
[/code]or with latest hotness.
background-color: rgba(127,127,127,.6);

if i do it this way will it show up in all web browsers ok new and old?

cause i dont understand what way to do it the way site designer is telling me

HairMonster

pjwhite99 wrote: »

if i do it this way will it show up in all web browsers ok new and old?

In my experience, IE 7 (and maybe 8) don't implement transparency very well. If you have 2 overlapping transparencies it misbehaves and can make parts totally opaque. Is this the problem you are having?

inov8ionz

I agree with site designer, the easiest way around this is just decrease the opacity and save as a .png file. That way there is no css required and you can be guaranteed it will work properly on all browsers.

Spunog UIE

inov8ionz wrote: »

I agree with site designer, the easiest way around this is just decrease the opacity and save as a .png file. That way there is no css required and you can be guaranteed it will work properly on all browsers.

...except IE6. There are javascript plugins etc to fix this tho.

inov8ionz

Spunog UIE wrote: »

...except IE6. There are javascript plugins etc to fix this tho.

I know, isnt it crazy to think people are still using IE6, anyone who i have met who work on the net hate ie6! It causes so much hassel for web designers!