Jaeger Jaeger - 1 year ago 95
CSS Question

Is there a way to fix an image 's position inside a div without background?

I'm currently integrating an article's view in a ruby on rails environment.
I wanted to create a 450px height div set the article's image inside it and fix so it would look like this

<div class="image_container>
<img src="/path/to/image.jpg" /> <!-- or <%= image_tag @article.image %> -->

and the css would look like this

position: relative;
height: 450px;
overflow-y: hidden

.image_contianer img{
height: 100%
position: fixed;

Obviously, it worked until I set the position to fixed, where it got fixed for the viewport and not the div.

Is there a way to fix it in a way or an other, without using
directly in the html to get the image fixed?


I created a codepen so you guys can understand what I'm talking about, sorry for the time it took:


Thank you in advance

Answer Source

Okay I have a solution where I nest divs to achieve the same effect:

.image-container {
  position: relative;
  height: 400px;
  overflow-y: hidden;

.image-container img {
  position: absolute;
  height: 100%;

.image-container-holder {
  position: relative;
  height: 100%;
  overflow-y: scroll;
.my-child {
  height: 40rem;
  background: rgba(0, 0, 255, .5);
  margin-top: 20rem;
  margin-left: 5rem;


<div class="image-container">
  <img src="https://placekitten.com/g/1450/500">
  <div class="image-container-holder">
    <div class="my-child">

It solves it, although I would still say getting it to work with background-position: fixed would be a nicer solution.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download