带有一半背景图像的页脚

Question

I have designed a footer for a website using Figma which looks like the image provided below:

see design Picture below design image

Added working example

 #f-text{ font-size: 14px; color: #ffffff; } #footer-head{ font-family: 'Poppins', sans-serif; font-size: 4.5em; color: #ffffff; } #footer-text{ color: #818181; font-size:17px; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <footer class="footer mt-5" style="width:100%; padding-top: 100px; padding-bottom:40px; margin-top: 75px; position:absolute; background-color: #0C0C0C"> <div class="row"> <div class="col-sm-8 mx-auto my-auto text-center"> <div class="col-6"> <h5 id="footer-text">phone</h5> <p style="color: #ffffff;" id="f-text">7879229242</p> </div> <div class="col-6 "> <h5 id="footer-text">address</h5> <ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="1400" data-sal-easing="ease-out-bouce" data-sal-duration="1200"> <p id="f-text">infront of kamal talkies, rajnandgaon, chattisgarah</p> </ul> </div> <div class="col-6 text-center"> <h5 id="footer-text">follow us</h5> <ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="2000" data-sal-easing="ease-out-bouce" data-sal-duration="1200"> <ol class="text-center"> <li style="display:inline-block; color: #ffffff;padding-right: 0.5em;" id="f-text">In</li> <li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Fb</li> <li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Tw</li> <li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Yt</li> </ol> </ul> </div> </div> <div class="col-sm-4"> <h5 id="footer-head">AW</h5> <p style="color: #ffffff" id="f-text">AW Zone is a full-service Photography Agency based in rajnandgaon, founded by Ayush Waghmare.</p> </div> </div> <p class="text-muted text-center mt-5 pt-5" id="footer-par" style="color:white; font-size: 13px;">Coded+designed by<span style="font-weight:medium;"> Semicolon</span> with passion and <i class="far fa-keyboard"></i></p> </footer>

I need help with turning my design into working code.

Answer 1

Since you need the "background-image" to extend beyond the footer you cannot use background-image property on the footer itself.

Use a pseudo-element absolutely positioned and place the background image on that .

Eg

 body { display: flex; height: 100vh; flex-direction: column; justify-content: flex-end; } footer { margin: 0 auto; position: relative; width: 80%; height: 50vh; background: black; } footer::after { content: ""; width: 20vw; height: 20vw; background-image: url(http://www.fillmurray.com/460/460); background-size: contain; position: absolute; right: 0; top: 0; transform: translate(50%, -50%); z-index: -1 }

 <footer> </footer>

Answer 2

 #f-text { font-size: 14px; color: #ffffff; } #footer-head { font-family: 'Poppins', sans-serif; font-size: 4.5em; color: #ffffff; } #footer-text { color: #818181; font-size: 17px; } footer { position: relative; } .footer-main { width: 90%; padding-top: 100px; padding-bottom: 40px; margin-top: 75px; background-color: #0C0C0C; } .img-styling { position: absolute; right: 0; top: 35px; z-index: -1; width: 30%; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div> <div class="footer-main"> <div class="row"> <div class="col-sm-8 mx-auto my-auto text-center"> <div class="col-6"> <h5 id="footer-text">phone</h5> <p style="color: #ffffff;" id="f-text">7879229242</p> </div> <div class="col-6 "> <h5 id="footer-text">address</h5> <ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="1400" data-sal-easing="ease-out-bouce" data-sal-duration="1200"> <p id="f-text">infront of kamal talkies, rajnandgaon, chattisgarah</p> </ul> </div> <div class="col-6 text-center"> <h5 id="footer-text">follow us</h5> <ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="2000" data-sal-easing="ease-out-bouce" data-sal-duration="1200"> <ol class="text-center"> <li style="display:inline-block; color: #ffffff;padding-right: 0.5em;" id="f-text">In</li> <li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Fb</li> <li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Tw</li> <li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Yt</li> </ol> </ul> </div> </div> <div class="col-sm-4"> <h5 id="footer-head">AW</h5> <p style="color: #ffffff" id="f-text">AW Zone is a full-service Photography Agency based in rajnandgaon, founded by Ayush Waghmare.</p> </div> </div> <p class="text-muted text-center mt-5 pt-5" id="footer-par" style="color:white; font-size: 13px;">Coded+designed by<span style="font-weight:medium;"> Semicolon</span> with passion and <i class="far fa-keyboard"></i></p> </div> <img class="img-styling" src="https://www.androidcentral.com/sites/androidcentral.com/files/topic_images/2014/materialdesign_principles_metaphor.png" alt="image" /> </div>