Skip to main content
Mikedwds
Participant
January 20, 2019
Answered

Opaque background image for whole page-static

  • January 20, 2019
  • 2 replies
  • 397 views

I am trying to have an opaque image as a background that doesn't move but the rest of the page scrolls as usual, Can someone help me?

Thanks in Advance

    This topic is closed to new replies. Start a new post to keep the conversation going.
    Correct answer Nancy OShea

    You mean something like this?

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Fixed Background</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style>

    body {

    margin: 0;

    background: #000 url(https://placeimg.com/1000/700/nature) center center fixed;

    background-size: cover;

    font-size: 4.25vw;

    }

    .container {

    background: rgba(24,3,3,0.5);

    color: #EAEAEA;

    padding: 5%;

    width: 50%;

    margin: 0 auto;

    line-height: 1.5

    }

    </style>

    </head>

    <body>

    <div class="container">

    <h1>My Awesome Website</h1>

    <h2>Some pithy slogan</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus harum pariatur placeat, minus rerum vero perspiciatis nostrum veniam soluta cupiditate ratione iure distinctio neque maiores numquam, molestiae voluptate ipsum unde!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus harum pariatur placeat, minus rerum vero perspiciatis nostrum veniam soluta cupiditate ratione iure distinctio neque maiores numquam, molestiae voluptate ipsum unde!</p>

    </div>

    </body>

    </html>

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    January 20, 2019

    You mean something like this?

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Fixed Background</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style>

    body {

    margin: 0;

    background: #000 url(https://placeimg.com/1000/700/nature) center center fixed;

    background-size: cover;

    font-size: 4.25vw;

    }

    .container {

    background: rgba(24,3,3,0.5);

    color: #EAEAEA;

    padding: 5%;

    width: 50%;

    margin: 0 auto;

    line-height: 1.5

    }

    </style>

    </head>

    <body>

    <div class="container">

    <h1>My Awesome Website</h1>

    <h2>Some pithy slogan</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus harum pariatur placeat, minus rerum vero perspiciatis nostrum veniam soluta cupiditate ratione iure distinctio neque maiores numquam, molestiae voluptate ipsum unde!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus harum pariatur placeat, minus rerum vero perspiciatis nostrum veniam soluta cupiditate ratione iure distinctio neque maiores numquam, molestiae voluptate ipsum unde!</p>

    </div>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    Community Expert
    January 20, 2019
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!