Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1326243

    beatblueprints
    Participant

    Hi,

    I have a video background which I would like to put a dotted overlay over.

    My video background is on Section 1 in Cornerstone. So I tried the css from this thread, but didn’t have any luck: https://community.theme.co/forums/topic/dotted-overlay-2/

    Would love any help getting it to work!

    Cheers!

    #1326680

    Friech
    Moderator

    Hi There,

    Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    Cheers!

    #1326899

    beatblueprints
    Participant
    This reply has been marked as private.
    #1326925

    Rue Nel
    Moderator

    Hello There,

    Thanks for providing the url of your site. Have you place the correct path of the dot image png file? You can try this code:

    .home div#x-section-1:before {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: url("http://www.clker.com/cliparts/c/c/2/a/1194989366182291164pattern-dots-square-grid-02.svg.med.png");
        content: '';
        display: block;
        z-index: 16000;
    }
    
    .home div#x-section-1 {
        position: relative;
    }

    This is the sample result: http://prntscr.com/dum3nk

    Since you have installed a caching plugin W3 Total Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

    Hope this helps.

    #1327873

    beatblueprints
    Participant
    This reply has been marked as private.
    #1328273

    Rue Nel
    Moderator

    Hello There,

    Your image is not working. You may use this code instead:

    .home div#x-section-1:before {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: url("https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-dots.png");
        content: '';
        display: block;
        z-index: 16000;
    }
    
    .home div#x-section-1 {
        position: relative;
    }
    

    You will need to download the png image and upload it to your S3 bucket without modifying it. Please do not modify the png image.
    https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-dots.png
    https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-squares.png

    Hope this helps.

    #1328302

    beatblueprints
    Participant

    This is exactly what I wanted! Thanks so much!

    Is there a way to make the text display on-top of the overlay, so only the video gets the overlay and not the text?

    I’m just using a normal text box in cornerstone for it.

    #1328387

    Rue Nel
    Moderator

    Hello There,

    Thanks for updating in! To be able to have the dots behind the text and just only above the video layer, please update the code and make use of this code instead:

    .home div#x-section-1 .x-video:before {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: url("https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-dots.png");
        content: '';
        display: block;
        z-index: 1;
    }
    
    .home div#x-section-1 .x-container {
        position: relative;
        z-index: 10000;
    }

    We would loved to know if this has work for you. Thank you.

    #1329316

    beatblueprints
    Participant

    Works like a charm!

    You guys always do such an amazing job at helping out.

    Cheers!

    #1329550

    Prasant Rai
    Moderator

    You are most welcome. 🙂