Background fixed scroll

HTML & CSS
1

Hello everybody. I want to do background fixed scroll. For example, look at this site: https://www.skrill.com/en/.

2

Hi there heybetov1998,

here is an example for you to play with…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
    background-image: url( https://www.skrill.com/fileadmin/user_upload/SK_HERO-remittance_new-2.jpg );
    background-size: cover;
    background-attachment: fixed;
 }
h1 {
    line-height: 1em;
    font-size: 3em;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 0.062em #35182c;
 }
.container {
    max-width: 40em;
    padding: 2em;
    margin: 1em auto;
    border: 0.062em solid #35182c;
    border-radius: 0.75em;
    background-color: rgba( 255, 255, 255, 0.75 );
    box-shadow: 0.75em 0.75em 0.75em rgba( 0, 0, 0, 0.5 );
 }
@media ( max-width: 21em ) {
h1 {
    font-size: 2.5em;
  }
 }
</style>

</head>
<body> 

<h1>Not difficult</h1>

<div class="container">
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  Curabitur sit amet sem sed libero bibendum tempus faucibus       
  quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
  nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
  interdum justo ac justo vehicula consequat. Curabitur et 
  volutpat nibh. Phasellus rutrum lacus at dolor placerat 
  feugiat. Morbi porta, sapien nec molestie molestie, odio 
  magna vestibulum lorem, vitae feugiat est leo sit amet 
  nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
  magna sed, pretium commodo odio. Sed porttitor augue velit, 
  quis placerat diam sodales ac. Curabitur vitae porta ex. 
  Praesent rutrum ex fringilla tellus tincidunt interdum. 
  Proin molestie lectus consectetur purus aliquam porttitor. 
  Fusce ac nisi ac magna scelerisque finibus a vitae sem.
 </p><p>
  Donec vehicula diam non leo efficitur, id euismod odio 
  tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
  et libero non diam tempor sagittis. Quisque vel egestas 
  ipsum. Integer sed elit eu orci blandit commodo in in erat. 
  Donec blandit, mi at gravida varius, nulla tellus vulputate 
  ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
  penatibus et magnis dis parturient montes, nascetur ridiculus 
  mus. Curabitur tristique varius ullamcorper.
 </p><p>
  Nam venenatis diam ante, et cursus elit porttitor at. Morbi 
  mattis leo at ex vehicula, non vestibulum ligula aliquam. 
  Maecenas non nibh sollicitudin, porttitor odio in, elementum 
  arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac 
  rutrum odio bibendum volutpat. Phasellus ac sem consequat 
  lorem congue malesuada vitae vitae diam. Donec eu imperdiet 
  augue. Curabitur ullamcorper sit amet libero in ullamcorper. 
  Donec sed laoreet quam. Phasellus malesuada libero felis, non 
  elementum ex tincidunt eget. Quisque cursus arcu vel diam 
  consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
 </p><p>
  In sapien massa, feugiat ut magna eu, hendrerit porttitor 
  justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam 
  facilisis, et molestie dolor blandit. Pellentesque non lectus 
  odio. Curabitur pulvinar orci vitae lorem bibendum volutpat. 
  Duis congue dignissim ante ut consequat. Sed nec sagittis 
  neque, quis vehicula urna. Fusce laoreet interdum ligula vel 
  finibus. Nunc odio purus, dapibus sit amet orci eget, congue 
  eleifend erat. Quisque porttitor imperdiet ullamcorper. 
  Aenean non orci nec magna tempor porta at id ipsum.
 </p><p>
  Cras euismod euismod nibh, nec hendrerit ante efficitur id. 
  Donec sit amet interdum mauris. Maecenas pellentesque, sem a 
  commodo tincidunt, quam ex viverra nibh, non consectetur odio 
  quam et velit. Nulla eu risus quis magna suscipit malesuada 
  vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id 
  elementum nisi interdum. Integer sem quam, tincidunt nec quam 
  ac, lobortis volutpat ipsum. Curabitur nec turpis viverra, 
  eleifend arcu non, egestas felis. Etiam a eros felis. Aliquam 
  nec ullamcorper enim. Donec sit amet commodo ante, vitae 
  consectetur sem. Proin ut luctus dolor. Integer lectus massa, 
  maximus nec urna non, ullamcorper hendrerit mi. 
 </p>
</div>

</body>
</html>

coothead

2 Likes
3

Here’s a similar method to the above to use multiple fixed background images.

http://www.pmob.co.uk/temp2/scroll-fixed-background.html

You have to be careful with images and colours though when you start doing this type of thing or it looks a mess.

Also there are issues on mobiles with fixed positioning and need to be tested thoroughly. I’ve removed the fixed attachment for ios and applied a single background to a fixed element instead which works ok on ios. (IOS does not like background:attachment:fixed and background-size:cover on the same element but works if you fix position the element instead and remove that background-attachment fixed.)

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.