Transparency and css issue! (SOLVED)

[Umbreon]

Im currently designing my site from scratch. I just noticed that one of my content blocks is not supporting transparency. Look at it:

http://flash-planet.co.cc/ViewGame.php?gid=93823

How do I fix that!?!?!

CSS part:

#conTOP {
    background-image:url('images/contop.png');
    background-repeat: no-repeat;
    position:relative;
    top:270px;
}

Browser: Chrome

 

[NBK*Twitch]

Re: Transparency and css issue!

Well in the css you are not telling it to be transparent.

So add this in your css -

filter:alpha(opacity=50);
-moz-opacity:0.5;
-webkit-opacity: 0.5;
opacity: 0.5;

Change the numbers as you need.

Edit: Oh nvm I see what you mean now.

Try what the below person has said.

 

[Damien]

Re: Transparency and css issue!

Hi,

Chance your

#conTOP {
    background-image:url('images/contop.png');
    background-repeat: no-repeat;
    position:relative;
    top:270px;
}

Change to

#conTOP {
    background-image:url('images/contop.png');
    background-repeat: no-repeat;
    position:relative;
    width: 800px;
    height: 320px;
    top:270px;
}

That should do it 🙂 I think..

 

[Damien]

Re: Transparency and css issue!

Well in the css you are not telling it to be transparent.

So add this in your css -

filter:alpha(opacity=50);
-moz-opacity:0.5;
-webkit-opacity: 0.5;
opacity: 0.5;

Change the numbers as you need.

Should not need to do this if it's already a transparent image.

 

[NBK*Twitch]

Re: Transparency and css issue!

Well in the css you are not telling it to be transparent.

So add this in your css -

filter:alpha(opacity=50);
-moz-opacity:0.5;
-webkit-opacity: 0.5;
opacity: 0.5;

Change the numbers as you need.

Should not need to do this if it's already a transparent image.

Yeah I realized thats what he meant. Hence why I edited my post.

 

[Damien]

Re: Transparency and css issue!

Well in the css you are not telling it to be transparent.

So add this in your css -

filter:alpha(opacity=50);
-moz-opacity:0.5;
-webkit-opacity: 0.5;
opacity: 0.5;

Change the numbers as you need.

Should not need to do this if it's already a transparent image.

Yeah I realized thats what he meant. Hence why I edited my post.

Ahh sorry about that, did not see the edit 🙂

 

[Umbreon]

Re: Transparency and css issue!

Hi,

Chance your

#conTOP {
    background-image:url('images/contop.png');
    background-repeat: no-repeat;
    position:relative;
    top:270px;
}

Change to

#conTOP {
    background-image:url('images/contop.png');
    background-repeat: no-repeat;
    position:relative;
    width: 800px;
    height: 320px;
    top:270px;
}

That should do it 🙂 I think..

It works, thanks m8!

 

[Damien]

Re: Transparency and css issue!

Also just a tip

Change...

body {
    background-image: url('images/top.png');
    background-color: #000810;
    font: 11px "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    color: white;
    height: 100%;
}

change it to..

body {
    background-image: url('images/top.png');
    background-repeat:no-repeat;
    background-color: #000000;
    font: 11px "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    color: white;
    height: 100%;
}

Should make it look better 🙂

 

[Umbreon]

Re: Transparency and css issue!

Also just a tip

Change...

body {
    background-image: url('images/top.png');
    background-color: #000810;
    font: 11px "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    color: white;
    height: 100%;
}

change it to..

body {
    background-image: url('images/top.png');
    background-repeat:no-repeat;
    background-color: #000000;
    font: 11px "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    color: white;
    height: 100%;
}

Should make it look better 🙂

Okay, thx :yes:

 

[Damien]

Re: Transparency and css issue!

Okay, hope that helped you 🙂

 

[Damien]

Re: Transparency and css issue!

body {
    background-image: url('images/top.png');
    background-repeat:no-repeat;
    background-position:right;
    background-color: #000000;
    font: 11px "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    color: white;
    height: 100%;
}

Chage the body to that, it should fix the left side that does not match the background 🙂

 

[Umbreon]

Re: Transparency and css issue!

body {
    background-image: url('images/top.png');
    background-repeat:no-repeat;
    background-position:right;
    background-color: #000000;
    font: 11px "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    color: white;
    height: 100%;
}

Chage the body to that, it should fix the left side that does not match the background 🙂

It kinda messes up the style and puts that nav bar out of place. Im looking for solutions to that right now.

 

[Damien]

Re: Transparency and css issue!

Okay try this...

.wrap{
width: 794px;
margin-left: auto;
margin-right: auto;}

Then wrap it around your code like this...

<div class ="wrap">

All your body's code here

</div>

Something like that better?

 

[Umbreon]

Re: Transparency and css issue!

Wait... im gonna put the login and game category box on the right side... but I will use your code in user pages. Thanks m8

EDIT: scratch that, im on my netbook, thats why. I will use it then.

 

[Damien]

Re: Transparency and css issue!

Glad I could help, + rep appreciated 🙂

 

[Umbreon]

Re: Transparency and css issue!

Okay, +rep for you. Marking this topic as solved.