Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Jun 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question CSS Background image and color with opacity

    I am trying to place an bar image as a background (top part only) and the remaining background with a color (black) with opacity of 49%. Both in the same element. I have tried:


    background:url(../images/Bien_static1.png) center 0px no-repeat;
    margin-top: 10px;
    padding-top: 40px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;

    background: #000000;
    filter:alpha(opacity=60); /* IE */
    -moz-opacity:0.6; /* Mozilla */
    opacity: 0.6; /* CSS3 */

    But the image doesn't display at all. When I take off the second part (everything after background: #0000000 it will display the image.

    Any ideas on how to do this correctly? I am using Firefox latest version.

    Thanks!

  • #2
    New Coder
    Join Date
    Jun 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Forgot to add that I don't want the opacity to affect the image background, just the color opacity for the background.

    Thanks again!

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by mannygodi View Post
    But the image doesn't display at all. When I take off the second part (everything after background: #0000000 it will display the image.
    If you declare a property (e.g., background) multiple times for an element in a single style rule, the declaration that occurs last takes precedence and the others are ignored. Basically, you specified background then overrode that image by specifying background again as a color.

    You can fix this issue by either merging the two property declarations or making the second declaration only set a sub-property (background-image) of the shortcut property (background).

    Example 1: Merger:
    Code:
    /* The two declarations in comments below have been merged. */
    /* background:url(../images/Bien_static1.png) center 0px no-repeat; */
    /* background: #000000; */
    background: black url("../images/Bien_static1.png") top no-repeat;
    In the above code, I used the keyword black which is equivalent the hexadecimal code #000000. I also used top which is a shortcut way of specifying center top which is, of course, equivalent to center 0px

    Example 2: Set Sub-Property:
    Code:
    background: url("../images/Bien_static1.png") top no-repeat;
    background-color: black;
    Quote Originally Posted by mannygodi View Post
    Forgot to add that I don't want the opacity to affect the image background, just the color opacity for the background.
    The opacity property affects entire elements. To only affect a color, use HSLA or RGBA colors:

    Code:
    /* HSLA version of 60% black. The last value, lightness, when set to 0%, is equivalent to black.
    The first two values, hue (an integer representing degrees) and saturation (a percentage), don't matter and can be set to anything because 0% lightness means there's no light to make their values relevant.
    The last value refers to the alpha of the color, which is just another way of saying "opacity". */
    background-color: hsla(0, 0%, 0%, .6);
    
    /* RGBA version of 60% black. With zero values for the red, blue, and green components, there's no light and therefore the color is black. */
    background-color: rgba(0, 0, 0, .6);
    Quote Originally Posted by mannygodi View Post
    filter:alpha(opacity=60); /* IE */
    -moz-opacity:0.6; /* Mozilla */
    opacity: 0.6; /* CSS3 */
    -moz-opacity is well past its shelf life and should not be used. All browsers support opacity and Mozilla browsers have for a very long time now.

    filter should generally only be used for IE8 and lower; those versions of the browser don't support opacity. Of course, you don't want to use that property here, so it's a moot point. If you need translucent background colors in IE8 or lower, you'll have to build them into your background images or create a translucent color image and layer it under the other background image (using a separate element).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    mannygodi (06-03-2013)

  • #4
    New Coder
    Join Date
    Jun 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile

    Thank you very much!!!! Excellent explanation. That dissipates any doubts I had.

  • #5
    New Coder
    Join Date
    Jun 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    I have been trying to use
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));

    to do a from solid color to an ending in transparancy, which it works in firefox
    but was wondering if there is a standard now days that will be better for all
    browsers instead of just firefox???

    Any ideas ???

    Also, is there a website where it shows the old standards and new ones??

    Thanks again !

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by mannygodi View Post
    I have been trying to use
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));

    to do a from solid color to an ending in transparancy, which it works in firefox
    but was wondering if there is a standard now days that will be better for all
    browsers instead of just firefox???
    The latest draft of the relevant CSS3 specification is http://dev.w3.org/csswg/css-images-3/#linear-gradients.

    Using the current syntax, your code should be written as follows:
    Code:
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    Since the angle argument is optional and to bottom is the default argument, this code can be further abbreviated to:
    Code:
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    My testing indicates that the current syntax works in the latest release of every major browser I'm able to test: Chrome 27, Firefox 21, IE10, and Opera 12.1/15.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    mannygodi (06-14-2013)

  • #7
    New Coder
    Join Date
    Jun 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    That worked !! Thanks again for all your help.

  • #8
    New Coder
    Join Date
    Jun 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    I have been trying to modify a template and so far with all your help has been going great!!! But once again I am stuck while trying to implement pseudo elements into the template. I have been using Joomla 3.x since once the template is all finish, it's easier to just write the content. I am hoping that you are familiar with Joomla templates? If not, anyone out there could please give me a hand??? I am those kind of people that learns by actually doing it but I have been doing so many combinations/variations of the following code without success. I am trying to add at the beginning of a container an image (one only, no repeat) using :before and leave the standard image in the middle and repeat x times and then at the end, insert another different image with the :after

    The first section was already in the template, the second section is the one I am trying to implement into the template.

    Here it goes:

    #maincontent > div.inner {
    background: url(../images/boton1.png) center 0px repeat-x;
    background-color: rgba(0, 0, 0, .6);

    margin-top: 10px;
    padding-top: 1px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
    }


    I have tried the following but doesn't work:


    #maincontent > div.inner:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 125px;
    width: 125px;
    background: url(TRcorner.gif) no-repeat;

    }

    I don't know if I am adding the right code or not, or if I am just doing it wrong all.

    I have been trying to ask for help in Joomla forums but no one seems to care

    Thanks again for all (and everyone s ) help !!

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    The CSS itself looks correct. But make sure the image path is correct, too. It differs from the one in the standard rule. Also make your div.inner position relative so that the absolute position of the generated content is relative to that.

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by mannygodi View Post
    The first section was already in the template, the second section is the one I am trying to implement into the template.

    Here it goes:

    #maincontent > div.inner {
    background: url(../images/boton1.png) center 0px repeat-x;
    background-color: rgba(0, 0, 0, .6);

    margin-top: 10px;
    padding-top: 1px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
    }


    I have tried the following but doesn't work:


    #maincontent > div.inner:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 125px;
    width: 125px;
    background: url(TRcorner.gif) no-repeat;

    }
    Assuming that I understand your intent correctly, this should work:

    Code:
    #maincontent > div.inner {
    	margin: 10px 0 0;
    	padding: 1px 30px 10px;
    	background: url("TRcorner.gif") no-repeat, rgba(0, 0, 0, 0.6) url("../images/boton1.png") top repeat-x;
    }
    If you insist on using a pseudo‐element, then (as VIPStephan indicated) you need to make the element a positioning context. Otherwise, the element will be positioned at the top left of the viewport. Example:

    Code:
    #maincontent > div.inner {
    	position: relative;
    	margin: 10px 0 0;
    	padding: 1px 30px 10px;
    	background: rgba(0, 0, 0, 0.6) url("../images/boton1.png") top repeat-x;
    }
    #maincontent > div.inner::before {
    	content: "";
    	position: absolute;
    	left: 0;
    	top: 0;
    	width: 125px;
    	height: 125px;
    	background: url("TRcorner.gif") no-repeat; 
    }
    Also, (again, as VIPStephan indicated) you should check your paths. Your URLs indicate that one background image is located in the images directory while the other is not; that inconsistency indicates a possible path error.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    New Coder
    Join Date
    Jun 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    Tried it but didn't work, I have attached 2 screen shots




  • #12
    New Coder
    Join Date
    Jun 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    Forgot to attached a third image, this one is the one without the hello in the content. Everything (White little bar and Hello word) disappears and position of original text goes back up.


  • #13
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by mannygodi View Post
    Tried it but didn't work
    In the shown code, you've removed the absolute positioning applied to the pseudo-element. This leaves the pseudo-element in the normal flow. As is the case with most elements in the normal flow, this causes the pseudo-element to push down content that appears afterward, such as your "MAIN TITLE HERE" heading.

    Either reposition the pseudo-element using position: absolute and position: relative or use the CSS3 multiple background images solution. I described both methods in my previous post.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #14
    New Coder
    Join Date
    Jun 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    Thanks for the fast reply, I added the relative position but didn't show the white little bar, then added absolute and it works but it is not on the very left side, I am trying to make the little white bar to show first and then the remaining red image (boton1.png) but for some reason is a bit to the right as you can see by the image below.

    Thanks again!



  • #15
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by mannygodi View Post
    Thanks for the fast reply, I added the relative position but didn't show the white little bar, then added absolute and it works but it is not on the very left side, I am trying to make the little white bar to show first and then the remaining red image (boton1.png) but for some reason is a bit to the right as you can see by the image below.
    Assuming #maincontent > div.inner extends to the left edge of that red/black bar background, then left: 0 should put your white background image at the edge of the bar. Otherwise, you'll need to use a negative left value to offset the image outside of #maincontent > div.inner.

    You can use #maincontent > div.inner { outline: 1px solid lime; } to see where the boundaries of your element are.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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