I’m trying to create a webpage where an image remains centered in the viewport while scrolling. However, I’m facing some issues with the CSS. Right now, the image is scrolling down, but once it reaches the center of the viewport, it gets offset by 50% of its height, making it appear out of position.
Please take some time to look at my current codebase. There goes some wrong behavior in the initial section while scrolling.
html,
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
h1 {
margin: 16px;
}
p {
margin: 16px;
}
.container {
display: flex;
}
.text-container {
width: 50%;
}
img {
position: sticky;
top: 50%;
width: 100%;
height: auto;
transform: translateY(-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
As I wandered through the endless expanse of the sprawling cityscape, with towering buildings on either side that
seemed to stretch toward the heavens, their reflective glass windows capturing the ever-changing hues of the sky as
the day transitioned into night, I couldn’t help but feel a sense of smallness, a kind of insignificance in the
grand scheme
of things, yet at the same time, there was this unmistakable undercurrent of being part of something much larger, as
though the intricate web of human lives, crisscrossing each other like invisible lines of connection, brought us all
together in a shared experience, and as the streetlights flickered on one by one, casting their warm glow on the
cracked
pavements below, the hum of traffic and the distant chatter of people became the background music to the unfolding
scene, a soundtrack of urban life that continued relentlessly, day in and day out, without pause, without a moment
to catch its breath, and in that moment, I felt myself being swept up in the rhythm of it all, like a leaf caught in
the swirling currents of a fast-moving river, unsure of where it would end up but unable to resist the pull, and as
I
walked further, my footsteps echoing faintly against the walls of towering buildings that loomed overhead, I noticed
the
small details that often go unnoticed in the rush of everyday life—the weathered bricks of old structures that had
stood
the test of time, the faint graffiti scrawled in hidden corners, messages of rebellion or love or simply the need to
leave a mark, however fleeting, and the way the light caught the delicate drops of rain that had begun to fall,
turning the
street into a shimmering mirror that reflected the city back upon itself, a distorted but beautiful image of a place
that was constantly in flux, never quite the same from one moment to the next, always shifting, evolving, and
growing, just as the people who inhabited it were, each carrying with them their own stories, their own struggles,
and their
own dreams, all weaving together in the vast, complex narrative that was this city, this living, breathing organism
made
up of countless lives intersecting in ways both obvious and subtle, and as I passed by a small park, a rare green
space
amidst the concrete jungle, I saw children laughing and playing, their carefree energy a sharp contrast to the
hurried, tired faces of the adults rushing past, and it struck me how easily we lose that sense of wonder as we grow
older,
how
the weight of responsibilities, of expectations, of the need to achieve and succeed and keep moving forward, often
blinds us to the simple joys that once came so naturally, like the thrill of running through an open field, or the
delight in watching a butterfly flutter by, or the peace that comes from lying on the grass and staring up at the
clouds, imagining shapes and stories in their ever-shifting forms, and I wondered when exactly we lose that, when
does
the world start to seem smaller, less magical, more predictable, more constrained by the rules and limitations that
adulthood imposes, and is it possible to get that sense of wonder back, or is it lost forever, a casualty of the
inevitable march of time, and as I mused on these thoughts, I found myself walking toward the edge of the city,
where
the buildings began to thin out and the noise of the streets faded into a quiet hum, and beyond the city’s limits,
the
landscape opened up into wide, rolling hills that stretched as far as the eye could see, their soft green curves
bathed
in the golden light of the setting sun, and it was here, in this space between the bustling metropolis and the
serene
countryside, that I felt a strange sense of peace, as though I had stumbled upon a hidden threshold, a place where
the
chaos of modern life met the timeless stillness of nature, and as I stood there, looking out at the horizon, I felt
a
deep sense of connection to everything around me, to the city behind me, with its countless lives and stories, and
to
the land before me, with its quiet beauty and ancient rhythms, and it occurred to me that perhaps the key to finding
balance in life lies in these in-between spaces, these moments of transition where we can step back from the rush
and
noise of the world and simply be, without the need to do or achieve or prove anything, and as the sun dipped lower
in
the sky, casting long shadows across the hills, I turned and began the walk back into the city, my mind quieter now,
my
thoughts no longer racing, and as I re-entered the familiar streets, now bathed in the soft glow of twilight, I felt
a
renewed appreciation for the small moments, for the beauty that can be found in the everyday, if only we take the
time
to notice it, and I realized that while the city may seem overwhelming at times, with its constant movement and
endless
demands, it is also a place of infinite possibility, where every person, every street, every corner holds the
potential
for new discoveries, new connections, new stories waiting to be written, and as I continued my journey through the
city,
I found myself paying closer attention to the world around me, noticing the way the light danced on the surface of
the
river that cut through the heart of the city, the way the wind whispered through the leaves of the trees that lined
the
streets, the way the sounds of laughter and conversation echoed off the walls of busy cafes, blending together into
a
symphony of human experience, and I felt grateful to be a part of it, to be alive in this moment, in this place,
with
all its imperfections and challenges, because there is beauty in the struggle, in the impermanence, in the knowledge
that nothing stays the same, that everything is constantly changing, and that we, too, are always growing, learning,
evolving, and that perhaps the greatest adventure of all is not in seeking out some distant, unattainable goal, but
in
embracing the journey itself, in finding meaning and joy in the here and now, in the people we meet, the places we
go,
the experiences we have, and in the quiet moments of reflection that remind us of who we are and what truly matters,
and
as the night began to fall, and the city lights twinkled like stars against the deepening sky, I walked on, my heart
full, my mind at peace, knowing that tomorrow would bring its own challenges, its own surprises, its own moments of
beauty and grace, and that no matter where the road might lead, I would be ready to face it, with open eyes, an open
heart, and a sense of wonder that, though perhaps diminished by the passing of time, still flickered within me, like
a
small but steady flame, reminding me that life, in all its complexity and uncertainty, is a gift, one that we should
never take for granted, and as I made my way back to my home, the familiar streets now quiet in the stillness of the
night, I couldn’t help but smile, grateful for the journey I had taken, both within the city and within myself, and
for
the knowledge that, no matter what the future holds, there is always beauty to be found, always something new to
discover, always a reason to keep moving forward, one step at a time.
</p>
<hr />
<div class="container">
<div class="text-container">
As I wandered through the endless expanse of the sprawling cityscape, with towering buildings on either side that
seemed
to stretch toward the heavens, their reflective glass windows capturing the ever-changing hues of the sky as the
day
transitioned into night, I couldn’t help but feel a sense of smallness, a kind of insignificance in the grand
scheme of
things, yet at the same time, there was this unmistakable undercurrent of being part of something much larger, as
though
the intricate web of human lives, crisscrossing each other like invisible lines of connection, brought us all
together
in a shared experience, and as the streetlights flickered on one by one, casting their warm glow on the cracked
pavements below, the hum of traffic and the distant chatter of people became the background music to the unfolding
scene, a soundtrack of urban life that continued relentlessly, day in and day out, without pause, without a moment
to
catch its breath, and in that moment, I felt myself being swept up in the rhythm of it all, like a leaf caught in
the
swirling currents of a fast-moving river, unsure of where it would end up but unable to resist the pull, and as I
walked
further, my footsteps echoing faintly against the walls of towering buildings that loomed overhead, I noticed the
small
details that often go unnoticed in the rush of everyday life—the weathered bricks of old structures that had stood
the
test of time, the faint graffiti scrawled in hidden corners, messages of rebellion or love or simply the need to
leave a
mark, however fleeting, and the way the light caught the delicate drops of rain that had begun to fall, turning
the
street into a shimmering mirror that reflected the city back upon itself, a distorted but beautiful image of a
place
that was constantly in flux, never quite the same from one moment to the next, always shifting, evolving, and
growing,
just as the people who inhabited it were, each carrying with them their own stories, their own struggles, and
their own
dreams, all weaving together in the vast, complex narrative that was this city, this living, breathing organism
made up
of countless lives intersecting in ways both obvious and subtle, and as I passed by a small park, a rare green
space
amidst the concrete jungle, I saw children laughing and playing, their carefree energy a sharp contrast to the
hurried,
tired faces of the adults rushing past, and it struck me how easily we lose that sense of wonder as we grow older,
how
the weight of responsibilities, of expectations, of the need to achieve and succeed and keep moving forward, often
blinds us to the simple joys that once came so naturally, like the thrill of running through an open field, or the
delight in watching a butterfly flutter by, or the peace that comes from lying on the grass and staring up at the
clouds, imagining shapes and stories in their ever-shifting forms, and I wondered when exactly we lose that, when
does
the world start to seem smaller, less magical, more predictable, more constrained by the rules and limitations
that
adulthood imposes, and is it possible to get that sense of wonder back, or is it lost forever, a casualty of the
inevitable march of time, and as I mused on these thoughts, I found myself walking toward the edge of the city,
where
the buildings began to thin out and the noise of the streets faded into a quiet hum, and beyond the city’s limits,
the
landscape opened up into wide, rolling hills that stretched as far as the eye could see, their soft green curves
bathed
in the golden light of the setting sun, and it was here, in this space between the bustling metropolis and the
serene
countryside, that I felt a strange sense of peace, as though I had stumbled upon a hidden threshold, a place where
the
chaos of modern life met the timeless stillness of nature, and as I stood there, looking out at the horizon, I
felt a
deep sense of connection to everything around me, to the city behind me, with its countless lives and stories, and
to
the land before me, with its quiet beauty and ancient rhythms, and it occurred to me that perhaps the key to
finding
balance in life lies in these in-between spaces, these moments of transition where we can step back from the rush
and
noise of the world and simply be, without the need to do or achieve or prove anything, and as the sun dipped lower
in
the sky, casting long shadows across the hills, I turned and began the walk back into the city, my mind quieter
now, my
thoughts no longer racing, and as I re-entered the familiar streets, now bathed in the soft glow of twilight, I
felt a
renewed appreciation for the small moments, for the beauty that can be found in the everyday, if only we take the
time
to notice it, and I realized that while the city may seem overwhelming at times, with its constant movement and
endless
demands, it is also a place of infinite possibility, where every person, every street, every corner holds the
potential
for new discoveries, new connections, new stories waiting to be written, and as I continued my journey through the
city,
I found myself paying closer attention to the world around me, noticing the way the light danced on the surface of
the
river that cut through the heart of the city, the way the wind whispered through the leaves of the trees that
lined the
streets, the way the sounds of laughter and conversation echoed off the walls of busy cafes, blending together
into a
symphony of human experience, and I felt grateful to be a part of it, to be alive in this moment, in this place,
with
all its imperfections and challenges, because there is beauty in the struggle, in the impermanence, in the
knowledge
that nothing stays the same, that everything is constantly changing, and that we, too, are always growing,
learning,
evolving, and that perhaps the greatest adventure of all is not in seeking out some distant, unattainable goal,
but in
embracing the journey itself, in finding meaning and joy in the here and now, in the people we meet, the places we
go,
the experiences we have, and in the quiet moments of reflection that remind us of who we are and what truly
matters, and
as the night began to fall, and the city lights twinkled like stars against the deepening sky, I walked on, my
heart
full, my mind at peace, knowing that tomorrow would bring its own challenges, its own surprises, its own moments
of
beauty and grace, and that no matter where the road might lead, I would be ready to face it, with open eyes, an
open
heart, and a sense of wonder that, though perhaps diminished by the passing of time, still flickered within me,
like a
small but steady flame, reminding me that life, in all its complexity and uncertainty, is a gift, one that we
should
never take for granted, and as I made my way back to my home, the familiar streets now quiet in the stillness of
the
night, I couldn’t help but smile, grateful for the journey I had taken, both within the city and within myself,
and for
the knowledge that, no matter what the future holds, there is always beauty to be found, always something new to
discover, always a reason to keep moving forward, one step at a time.
</div>
<div class="image-container">
<img src="https://dummyimage.com/600x400/0000ff/fff" alt="office">
</div>
</div>
</body>
</html>
3
Answers
Remove your
transform
andtop
css property and use this small js script to your file:Make sure you are selecting a true image with this JS script. I just selected an image in your document.
Well, The problem you are facing is due to
transform: translateY(-50%)
Bcoz, your expectations are it to go into middle but its getting applied at the start so If you got the height you can do that with only css with either
calc
function or go with the parent havingmargin-top
With calc():-
and with margin-top:-
Or with JS(since the solution is already posted so I ain’t doing it);
And another thing is that you can even set the
--image-height
variable name with JS which might be better solution.Instead of an image, the
.image-container
can besticky
: