Highlighted

Opaque background image for whole page-static

New Here ,
Jan 19, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

213

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Opaque background image for whole page-static

New Here ,
Jan 19, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

214

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 19, 2019 0
Adobe Community Professional ,
Jan 20, 2019

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 20, 2019 0
Adobe Community Professional ,
Jan 20, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 20, 2019 1