Search code examples
htmlcssfixed

Right and left fixed image position with css

I want to put a left and a right fixed image, and I don't know why the right one only goes to the right when is not fixed. This is my code:

<img src="img/leftImage.jpg" id="leftImage" />
<img src="img/rightImage.jpg" id="rightImage" />

and my css:

#leftImage{
  left: 0;
  width: 150px;
  height: 100%;
  position: fixed;
}

#rightImage{
  right: 0;
  width: 150px;
  height: 100%;
  position: fixed;
}

Can anyone help me with this? thank you!

EDIT

this is my index.html:

<body ng-cloak>
    <img src="img/leftImage.jpg" id="leftImage" />
    <div id="homescreen" class="container">
        <div ui-view></div>
    </div>
    <img src="img/rightImage.jpg" id="rightImage" />
    <footer></footer>
</body>

and the CSS that I have:

body {
  background: url(/img/background.jpg) repeat fixed;
  background-position-y: -50px;
  background-position-x: -50px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#homescreen {
  margin-top: 150px;
}

container is a bootstrap class.

Solution

  • you forgot to add the value for top

    do something like this:

    #leftImage {
  top: 20px; /* your required value */
  left: 0;
  width: 150px;
  height: 100%;
  position: fixed;
}

#rightImage {
  top: 20px; /* your required value */
  right: 0;
  width: 150px;
  height: 100%;
  position: fixed;
}