CODEWITHSUNDEEP
cssimagebackgroundcontainersbackground-image
Gal Grünfeld
Gal Grünfeld

Reputation: 840

HTML+CSS | Change Background Location Inside `<div>` - How Can I Achieve This?

I have a <div> container that I want it to have height:90vh,width:100vw.

I want to adjust its position and if there other things needed, them, too, to get from the left picture, to the right picture, inside my container:

Left - before | Right - after

Is it possible to adjust the position with pixels or something else such that I'd be able to "move" my picture inside my container, but that it'd still wouldn't leave empty space in the container, so it'd fully cover it?

Thanks in advance. :)

Upvotes: 0

Views: 49

Answers (1)

Andrew Tibbetts
Andrew Tibbetts

Reputation: 3072

It sounds like you're looking for a way to always have the image filling it's container even if the container changes size.

If you haven't already, create another div inside the container div and set it's background-image to your image url ( and remove the img ). Then set background-size: cover; on the new div. Now you can set the container div to display: flex; and mess with how the new div will react to other surrounding content.

E.g.

HTML:
<div class="container">
    <div class="image" style="background-image:url(<img_url_here>);"></div>
    <div class="other_varying_height_content"></div>
</div>

CSS:
.container { display: flex; }
.image { background-size: cover; }

Note: Your image would suggest you set background-position: center; on .image

Upvotes: 1

Related Questions