Background pattern/image and transparent content

  • Resolved dammsugare

    (@dammsugare)


    9 years, 11 months ago

    Hi,
    is it possible to make all the tables, blog entries, input fields etc have a transparent background instead of white so that you can see the image through that I have set as a background image for the page content(using the full width layout)? I want it to look similar to this
    https://caitlinwicker.com/shop/

    By default, all the tables and contact fields etc have a white background right now…

    Thank you,
    dammsugare

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

  • Hi there,

    Yes, this is possible. Could you post a link to your own website so we can take a look and make a code suggestion for you ??

    Cheers,

    Luke the Daft Duke

    Thread Starter dammsugare

    (@dammsugare)

    Hi,
    I cannot link because my site is only on my local server yet.
    I figured most of it out though, I only have three questions left:

    1.+2. How do I change the color of the contact form fields(by default white) and the billing&shipping fields(also white by default)?

    3. How do I change the border color of the woocommerce tables and fields?

    Thanks a lot,
    dammsugare

    You can try this css:

    input, textarea {
    background: transparent;
}
form.checkout input.input-text, .woocommerce input.input-text {
    border-color: red;
}

    Kadence Themes

    Thread Starter dammsugare

    (@dammsugare)

    Great, this did the job. Is it also possible to make the sticky header transparent like in your demo 1, but instead of white my background image should be transparent? I cannot use this

    .is-sticky .headerclass {
background: rgba(255,255,255,.9);
}

    since it would make the header white and transparent. I tried

    .is-sticky .headerclass {
opacity:.9;
}

    but it made the logo and the topbar also transparent!

    You can’t make a background image semi transparent unless you make the whole div and all the content semi transparent.

    You can edit your image in photoshop make it semi transparent there then save as a PNG so it keeps the transparency. then you could use that as your background.

    Kadence Themes

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Background pattern/image and transparent content’ is closed to new replies.