How to Make Background Image Opaque in Pique Theme

  • Unknown's avatar
    alysefaithflute · Member ·

    I am using wordpress on the phone version in Chrome.
    How do I make my background image on my home page opaque? The colour pallet changes the image colour when I select white in “pick your own color” in the background and colors section of customize. I would just like to have the image in the background with no tint.
    Also how do you change the zoom size of an image on the phone version? At the moment the image is zoomed in to a giant size and I have no way of changing it.
    Thank you in advance for your help.

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi, do you mean the image that’s under the footer menu? If so you would need custom CSS to adjust it (and that requires a premium plan) but once you have that, you can do it like this:

    .site-footer::before {
    background: rgba(31, 29, 26, 0.0);

    This is a color that goes on top of your picture and is partially transparent right now. It’s meant to create some contrast between your text and the background image.

    That last number (0.0) indicates transparency. Currently it’s at 0.875 on the site; setting it to 0 means there will be no overlay at all. You can also try numbers in between, like 0.4 … just do whatever looks good and is still readable.

    I wanted to note as well, though, background images can get cut off sometimes depending on the size of the screen. So you’ll want to test that as well and make sure this image works well as a background.

  • The topic ‘How to Make Background Image Opaque in Pique Theme’ is closed to new replies.