How to scroll content over background image with CSS

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”

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

<html xmlns=”http://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