SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using Opacity for the background alone?

    Hi
    Im creating a mybb theme, i have avast knowledge in Web designing but for some crazy reason i stopped and im trying to remember what i knew (Havent done it in a year).

    I want the background of a container to be a certain color. Lets say blue. I want to increase the opacity of this blue by 50%. When i do that i simply get the whole theme to go into opacity by 50% when really all i want is the blue container background. How can i fix this?

    Actually what im trying to achieve is have a transparent background for the container so if you'd like to help me do that i'd appreciate it since i cant remember how.

    This is the container code

    Code:
    #container {
    	background: #4f4e4e;
    	width: 90%;
    	color: #000000;
    	border: 5px solid #246cb0;
    	margin: auto auto;
    	padding: 20px;
    	text-align: left;
    	
    	font-weight: bold;
    }
    \

    Please message me ASAP if possible thank you have a wonderful day



    i want the clear transparent the image has

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    :: channels grumpy cat:: NO!

    Opacity just doesnt work that way.

    Am using percentages as a conceptual tool, not the actual value string.. hope you are able to follow my logic on this.
    Consider it as a variable; if you give the container "50%" opacity, then '100%' opacity will calculate to 50%. Opacity, unlike font-size, cannot be greater than "100%" ( it wouldn't make sense anyway.. what's MORE THAN FULLY OPAQUE? )

    That kinda leaves you with 3 choices:

    1) a transparent PNG ( this is if you are looking for widest browser support)
    2) the "transparency" you are trying to achieve is of a solid color, background: RGBA(r,g,b,a); works extremely well. Actually, for supporting browsers, this can be used for gradients as well.
    3) If you MUST have a complex semi transparent BG, you could still use transparency ( see, it's not an entirely useless property) by using a pseudo element ( :before, :after),absolute position, and a negative z-index ( OR you could relative position the children and give THEM a higher z-index).
    to get the pseudo element to cover the entire element , regardless of it's dimensions, use: top:0; bottom:0; left:0; right:0;

    hope that helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for your vivid detail but im presumming that i'll simply use a solid png and create a more transparent image. hopefully i can achieve this easily.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •