Custom CSS basics

  • (I have almost no knowledge of CSS, and am very much a GUI user, so be gentle with me when it comes to code.)

    I’m trying add a semi transparent block of colour behind text with a png.
    I’ve found a couple of ways I may be able to do this by pasting code into the Custom CSS section of my theme.
    I’ve tried this with a couple of different cblocksof code and acouple of different themes but the CSS doesn’t seem to make any difference.

    Is there somehting I need to change elsewhere to get any Custom CSS to funciton?

    (The site is on localhost so I’m afraid I can’t give a URL.)

Viewing 4 replies - 1 through 4 (of 4 total)

  • Are you sure you are using the correct classnames ( applying the code to the correct place)?

    A possible solution I found: https://stackoverflow.com/questions/5135019/css-opacity-only-to-background-color-not-the-text-on-it

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you emulate your page using CSSDesk.com?

    Thread Starter eyeghoti

    (@eyeghoti)

    I’m reasonably confident the CSS is valid as I’ve used the code from this WPBeginner tip.

    body.category-tv { 
background-image: url("https://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

    To get the classname I used Inspect Element (in Firefox).
    There seem to be two nested statements that highlight the right area when I roll over them with the mouse. 

    <div class="col-main">
  <div class="entry-content">

    I’ve tried replacing category-tv in the above code with both (as well as using a link to an image file on the localhost site) but it makes no difference at all.

    I don’t think we’ll be able to help further without seeing the full code

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom CSS basics’ is closed to new replies.