Participant

Answered

Opaque background image for whole page-static

Forum|Forum|7 years ago
January 20, 2019
2 replies
392 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 has been closed for replies.

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>

Community Expert

Correct answer

Community Expert

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

Community Expert

Community Expert

Is this what you are looking for html - Background-image + Fixed + NOT Transparent - Stack Overflow

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!