Help CSS container box sets opacity for all content not just the box.

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Please help.

I am trying to add a container to my pages
here is the CSS code im using

#content {
padding: 1em;
color:white;
background-color:black;
filter:alpha(opacity=98);
opacity:1.0;
}

The problem is the containers opacity when changed changes the content as well I basically want a container at 50% opacity and my wording and pictures staying solid.

Is there anyway I can do this cause every time I try everything goes to opacity 50 container, pics wording everything.
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like

Posted 8 years ago

  • 1
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
I do not know whether it would work but, if you add the filter:alpha... onto the end of the background line then it may work.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Thanks Andi!

Darryl, please let us know if you are still having trouble. This is not my area of specialty, so if Andi's suggestion did not do what you needed it to, I will ask a colleague of mine to take a look at this.

Emmy
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
Thanks for the replies but that wont work as Yola only lets you customise its own preset CSS coding.

Although a friend of mine got it to work using a background image instead of coding.

See www.itfgaming.com

Thanks for the feedback though :)
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
You can add your own CSS to the CSS editor, I have CSS containers and I have added them through the CSS editor and they work a treat!
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
ok wait how so then cause im having trouble with the background image now.

Andi please help me.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Okay, try doing this:

#content {
padding: 1em;
color:white;
background-color:black;
opacity:0.5;
}
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
I just thought... using a png image with a transparency set to 50% (in the actual image) would be much easier.

You would have to do the following:

#content {
padding: 1em;
background:#000 url('link to image here') repeat-x repeat-y;
}

Please note that this will not work in IE6 but small numbers of people use this browser.
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
Using a png image now but it does not always show, ill try the CSS you provided quickly and see how that goes.
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
I think ill stick with the png as for some reason the opacity setting just wont work for me.

I noticed sometime with the png that when I check my own website it doesnt show sometimes
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Okay, I do not know why this is.

Which browser and OS are you running on? Ensure that you do not have any transparency code for the png and that it is just the raw image that has the transparency.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Andi

Thanks again for your stellar help on this!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
No problem Sanja!
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
Thanks dude, im using IE8 and Vista and the image is just a raw png image.
As i said if i go to my website one minute its there the next its not. but im sure I can just deal with it lol.

Let me know if you see it, www.itfgaming.com
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
I have looked at your code, and you've used the wrong image link - you just need:

resources/Backgroung/containerbg.png

because only you can view images in the http://sitebuilder.yola.com/restricte... section as this is the Yola editor and you have to be logged in to see it.

Change the URL and it will work.
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
Like this?
#content {
padding: 1em;
color:white;
background-image: url://sitebuilder.yola.com/resources/Backgroung/containerbg.png );
}
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
so like this?

#content {
padding: 1em;
color:white;
background-image: url(http://sitebuilder.yola.com/resources...;
}
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Daryl,

No like this:

#content {
padding: 1em;
color:white;
background-image: url=(resources/Backgroung/containerbg.png );
}
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
actually the link should be:

background-image: url('resources/Backgroung/containerbg.png') repeat:x repeat:y;
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
Awesome gonna test now
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
Not working can you post it in full again?
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
div#content {
width:880px;
background:#FFF url=('resources/Backgroung/containerbg.png') repeat:x repeat:y;
padding: 1em;
}
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
Still nothing :(
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
Really have no idea why its not working... When I log on another pc the container shows as how I had it before just on occasion it doesnt show.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Okay, use this:

#content {
width:880px;
background:#FFF url=('resources/Backgroung/containerbg.png') repeat:x repeat:y;
padding: 1em;
}
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
Still nothing
('resources/Backgroung/containerbg.png') <<<<< Showing in red?
Photo of Darryl Kevin Linington

Darryl Kevin Linington

  • 25 Posts
  • 1 Reply Like
#content {
width:880px;
background:#FFF url=('resources/Backgroung/containerbg.png') <<< in red?repeat:x repeat:y;
padding: 1em;
}

Wow this is really comlicated ahahahahaha, Yola should have a container widget lol.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Okay, it works for me! I can see a background which is darker than the main image, just to confirm, you are not seeing the content background change?

Try removing the = that might help.