How to align buttons at the bottom left of a banner in all resolutions?-CodePudding

I'm trying to align buttons at the bottom left of a banner. I tried with a sample code but it gets misaligned every time the resolution changes.

Tried html code here,

<div >
            <div  style="background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg); background-repeat: no-repeat; background-size: 100% 100%;">
                <div >
                    <div ></div>
                    <div  style="margin-top: 12%">          
                          
                        <div  style="margin-top: 46%; margin-left: 254px !important;">
                            <button >Button1</button>
                        </div>
                        <div  style="margin-top: -7%; margin-left: 367px !important;">                              
                             <button >Button2</button>                               
                        </div>
                    </div>
                </div>
        </div>

Fiddle

CodePudding user response：

.header {
  background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  height: 10rem;
  object-fit: scale-down;
}

.btn {
  margin-top: 8.5rem;
  margin-left: 0.5rem;
 }

<div >
  <div >
    <div >
      <button
        >
        Button1
      </button>        
      <button >
        Button2
      </button>                               
    </div>
  </div>
</div>

For your background scaling, having a look at this link: https://www.w3schools.com/css/css3_object-fit.asp

Or you could try using flex for the layout: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CodePudding user response：

Here is a way to place the buttons as desired in the bottom left corner of the banner based on the existing code:

<div >
        <div  style="background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg); background-repeat: no-repeat; background-size: 100% 100%;">
            <div >
                <div  style="margin-top: 12%"></div>
                <div  style="display:flex;align-items: flex-end;">                
                    <div  style="margin:0">
                        <button >Button1</button>
                    </div>
                    <div  style="margin:0">
                         <button >Button2</button>
                    </div>
                </div>
            </div>
    </div>
</div>