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%); } 

http://jsfiddle.net/afelixj/q4o08e8u/1/


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -