CSS tutorial > CSS background > Fixing a background image

Fixing a background image

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      body {
        background-image: url('flower.png');
        background-repeat: no-repeat;
        background-position: right top;
        background-attachment: fixed;
      }
    </style>
  </head>
 
  <body>
 
    <h1>Fix the background</h1>
    <pre>
	  In order to notice the result the content
	  of the page should take as much space as
	  necessary for the vertical scrolling to appear.
	  
	  So in the example, we use the pre tag,
	  which allows you to paste the text into
	  the page with the author formatting.
	  
	  ...
	  
	  ...
	  
	  ...
	  
	  ...
	  
	  ...
	  
	  ...
	  
	  ...
	  
	  ...
	  
	  ...
	  
	  ...
	  
	  ...
	  
	  ...
	  
	  ...
	  
	  ^_^
	</pre>
 
  </body>
</html>

Result:

Edit the code listed above and click the "GO" button to view the result.