You can use CSS code to fix the position of the background image while the content scrolls over it. This effect is achieved with the next CSS test file:

File test.css

body {

background-color: #FFFFFF;

background-image: url(psy.jpg);

background-repeat: no-repeat;

background-position: 20px 20px;

background-attachment: fixed;

}

h1 {

text-align: center;

font: 24px Arial, Helvetica,Geneva ,Verdana, sans-serif;

}

p {

text-align: center;

font: 14px Arial, Helvetica,Geneva ,Verdana, sans-serif;

line-height: 1;

}

You can replace body{} declaration with the next shorter one:

 

body {

background: #ffffff url(psy.jpg) no-repeat fixed 20px 20px;

}

 

You can use for example the next test file:

 

File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>

<head>

<title>How to scroll content over background image with CSS </title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />

</head>

<body>

<h1>Oppa is Gangnam style Gangnam style</h1>

<p>A girl who is warm and humanle during the day</p>

<p>A classy girl who know how to enjoy the freedom of a cup of coffee</p>

<p>A girl whose heart gets hotter when night comes</p>

<p>A girl with that kind of twist</p>

<p>I&#39;m a guy</p>

<p>A guy who is as warm as you during the day</p>

<p>A guy who one-shots his coffee before it even cools down</p>

<p>A guy whose heart bursts when night comes</p>

<p>That kind of guy</p>

<p>Beautiful, loveable</p>

<p>Yes you, hey, yes you, hey</p>

<p>Beautiful, loveable</p>

<p>Yes you, hey, yes you, hey</p>

<p>Now let&#39;s go until the end</p>

<p>Oppa is Gangnam style, Gangnam style</p>

<p>Oppa is Gangnam style, Gangnam style</p>

<p>Oppa is Gangnam style</p>

<p>Eh- Sexy Lady, Oppa is Gangnam style</p>

<p>Eh- Sexy Lady oh oh oh oh</p>

</body>

</html>

The next picture shows the result:

Scrolling content over background image with CSS

Scrolling content over background image with CSS