Text not overlapping image-CodePudding

For some reason, the text is not overlaying the image. I'm trying to get text to overlap the iamge with a colorful background. Does anyone know why it's not working?

    <body>
        <script>
        
            .container {
                position: relative;
                font-family: Arial;
                }
                
            .text-block {
                position: relative;
                bottom: 20px;
                left: 20px;
                padding-left: 20px;
                padding-right: 20px;
                background: rgb(113, 203, 0);
                background: rgba(113, 203, 0, 0.4);
                }
                
        </script>
        
        <div id="container">
            <img src="img1.png" alt="Execution" >
            <div id="text-block">
                <h1>Plan D</h1>
                <p>Lorem ipsum's plan is to remain ambiguous text.</p>
            </div>
        </div>
        
    </body>

W3schools.com, typo's, etc.

CodePudding user response：

Your text block element has an id of text-block, instead of class. So the CSS selector .text-block isn't applying to it. Same with your container.

Your <script> tags should be <style> tags instead.