0
Welcome Guest! Login
0 items Join Now

how do I implement ::before?Trying to set background opacity only

Last Post
Search Topic

  • how do I implement ::before?Trying to set background opacity only

    Posted 6 years 7 months ago
    • Trying to set background opacity only

      using infolist in a showcase section
      trying to set the background with either opacity or grayscale and it renders text in the subsequent divs.

      tried many combinations of the ::before pseudo-elements cannot get it to take.
      #g-showcase.avshowcase {
    color: #efefef;
    position: relative;
    z-index: 100;
    background: #3a7ad9 url(/images/backgrounds/Server4sap1950x750.jpg) top center no-repeat;
    background-size: cover;
    -webkit-filter: grayscale(75%); /* Safari 6.0 - 9.0 */
    filter: opacity(75%); 
}

      globalmedhealthcare.com/antivirus
    • Last Edit: 6 years 7 months ago by Frank Tricamo.
    #1392803
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: how do I implement ::before?Trying to set background opacity only

    Posted 6 years 7 months ago
    • That won't work for what you are trying to do. :before and :after are pseudo elements For that to start a chance of working the background would have to be on those and not the main element. Also with pseudo element you need to specify the "content" attribute.

      What you actually need to do is just to add opacity to the image itself and upload that to your site. You can do this if you make the image a png instead of jpg.

      Regards, Mark.

    • The following users have thanked you: Frank Tricamo

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1392805

  • Re: how do I implement ::before?Trying to set background opacity only

    Posted 6 years 7 months ago
    • which format should i use for everything in order of preference?

      svg?
      png?
      gif?
      jpg?
    #1392882
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: how do I implement ::before?Trying to set background opacity only

    Posted 6 years 7 months ago
    • It depends in what context doesn't it but generally:

      svg for drawings/logos that you want to scale small and large without pixelation as they're vectors.
      jpg for photos (except if you need transparency).
      png for graphics (and also photos that need tranparency).
      gif for simple graphics that may also require animation but generally use png in preference to gif.

      ... as usual in web design there is an exception for every rule but those are the general principles.

      Regards, Mark.

    • The following users have thanked you: Frank Tricamo

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1392883

Time to create page: 0.058 seconds