[Resolved] Fix title text on scrolling background

Home Forums Support [Resolved] Fix title text on scrolling background

Home Forums Support Fix title text on scrolling background

  • This topic has 3 replies, 2 voices, and was last updated 4 years ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1190972
    mikeb82

    I’m working on a header with a moving background using CSS animation. I have the “scrolling” background working as a hook element in the header, but fixing the text in place has been problematic (so far). There may be a better way to do this. I’m trying to do this with CSS, but it may require a JavaScript solution. This is a dev site, so the issue isn’t time critical.

    https://webdevwp.com/

    Here’s the code I’m using:

    #sky {
        overflow: hidden;
        width: 100%;
        height: auto;
    }
    
    #clouds {
        width: 200%;
        height: 200px;
        background-image: url('https://webdevwp.com/wp-content/uploads/2020/03/clouds_bg2_760x485.jpg');
        background-size: cover;
        -webkit-animation: movingclouds 25s linear infinite;
        -moz-animation: movingclouds 25s linear infinite;
        -o-animation: movingclouds 25s linear infinite;
    }
    
    @keyframes movingclouds {
        0% {margin-left: 0%;}
        100% {margin-left: -100%;}
    }
    
    #clouds h1 {
        text-align: center;
        position: relative;
        margin-bottom: 12px;
    }
    
    #clouds h3 {
        text-align: center;
    }

    In the Header hook:

    <div id="sky">
    	<div id="clouds">
        <h1 >Web Dev WP</h1>
      </div>
    </div>
    #1191062
    David
    Staff
    Customer Support

    Hi there,

    without changing your markup – try changing these two parts of your CSS:

    #sky {
        overflow: hidden;
        width: 100%;
        height: auto;
    
        /* Make this container the relative parent */
        position: relative;
    }

    and:

    #clouds h1 {
        text-align: center;
        position: absolute;
    
        /* set positioning relative to parent */
        bottom: 20px;
        left: 20px;
    }
    #1191070
    mikeb82

    Thanks David!

    That did it. I also discovered that I can reliably scroll the site title by just changing the #clouds h1 position to relative.

    Your solution gives me both options.

    Thanks again!

    Mike

    #1191079
    David
    Staff
    Customer Support

    Cool – thanks for sharing 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.