Home Forums Arnold WordPress Theme Header text; apply translucent parallax effect to header text

This topic contains 1 reply, has 2 voices, and was last updated by  SeaTheme 1 month, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #20335

    ashpoleagency
    Participant
    Purchased
    Supported

    Hi!

    On the Arnold theme, X-Box post template, the header text has a translucent parallax effect applied. On many of the other post templates the text is simply black.

    Is it possible to isolate this feature on the header text, and apply it to the header text on other post and page headers using custom CSS? Essentially so that where the flat black text appears in the header of a page or post, it takes on the parallax image as it’s fill?

    I’m not sure I want to do this site wide, but would like to test it on a page or two, therefore can you please;

    1/ can you tell me how I can do this for a specific post only
    2/ can you tell me how I could apply this for all pages and post headers?

    Thanks so much!

    #20344

    SeaTheme
    Keymaster
    Purchased

    Hi,

    If you use the Big title template(Layout Template), there will be this option(Title Text Masking).

    2) The custom CSS(“Appearance > Customize: Additional CSS”) will affect all Posts and Pages

    .title-wrap-tit,
    .title-wrap-h1 {
        background-size: 0 0;
        background-image: url(the-image-URL.jpg);
    }
    .backgroundcliptext .title-wrap-tit,
    .backgroundcliptext .title-wrap-h1 {
       color: transparent!important;
        background-size: cover;
        background-attachment: fixed;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-position: 50% 50%;
    }

    1) For a specific single Post, please add the CSS with post ID:

    .postid-3191.title-wrap-tit {
        background-size: 0 0;
        background-image: url(the-image-URL.jpg);
    }
    .backgroundcliptext .postid-3191 .title-wrap-tit {
       color: transparent!important;
        background-size: cover;
        background-attachment: fixed;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-position: 50% 50%;
    }

    For a specific Page, please add the CSS with page ID:

    .page-id-4804.title-wrap-tit {
        background-size: 0 0;
        background-image: url(the-image-URL.jpg);
    }
    .backgroundcliptext .page-id-4804 .title-wrap-tit {
       color: transparent!important;
        background-size: cover;
        background-attachment: fixed;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-position: 50% 50%;
    }

    ps:
    You need to replace the-image-URL as your own image URL, replace the post/page ID
    the Page and Post className format is different

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!