1

I'm trying to develop a page with the following background image on its bottom.enter image description here

What I'm inspired from is the GITHUB 404 page's background. If you try increasing or decreasing the page size, it remains fixed with 100% width.

Any idea how can i achieve that effect with my image?

Subhan
  • 1,544
  • 3
  • 25
  • 58
  • you are looking for parallax – Gildas.Tambo Jan 22 '15 at 10:17
  • You are indeed looking for parallax, here is a pen I created using this. Look at the code and you will find the plugin I used and how it works. [Demo](http://codepen.io/Ruddy/pen/jEboey). – Ruddy Jan 22 '15 at 10:19
  • possible duplicate of [Move the background image on mouse over (Single Parallax)](http://stackoverflow.com/questions/19424317/move-the-background-image-on-mouse-over-single-parallax) – Gildas.Tambo Jan 22 '15 at 10:21
  • 1
    Guys, this is not what the OP is asking for... – Olivier Lance Jan 22 '15 at 10:42

2 Answers2

1

You can achieve that by a full width div with a repeating image background.
HTML:

<div id="bg">
</div>

CSS:

#bg {
    background-image: url("https://i.stack.imgur.com/08pYU.png");
    width: 100%;
    height: 221px;
}

Demo jsfiddle.

zord
  • 4,538
  • 2
  • 25
  • 30
0

#fixed
{
  background:url('https://i.stack.imgur.com/08pYU.png');
  height:220px;
  width:100%;
  overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
 background-size: 100% 100%;
  }
<div id="fixed">
  <div>
osman Rahimi
  • 1,427
  • 1
  • 11
  • 26