html - CSS Position Image bigger than it's container -
so i've seen how center image if it's wider container? have this
.section-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; } .section-background-image { position: relative; right:-30%; top: 0; left: 0; width: 100%; height: 100%; } .section-background-image img { position: relative; right:-30%; min-width: 100%; max-width: none; min-height: 100%; top: 0; left: 0; } <div class="section-background"> <div class="section-background-image " data-stellar-ratio="0.4"> <img src="my_huge_image.png" alt="" style="opacity: 0.3;"> </div> </div>
and want right portion of image appear if not fit container, (by default top left hand corner portion).
with code, doesn't work on first browser request (shows top left corner portion of image), shows right positioning on refreshes.
if there won't text in div, can use direction: rtl;
.section-background-image { .... direction: rtl; }
for vertical aligning, use below css
.section-background-image img { ... top:50%; transform: translatey(-50%); }
Comments
Post a Comment