Question 44523 in Html Question posted in
Some basic documentation can be found here.

fit footer image for all screen size – Html

I have the below code of the footer :

<div class="footer footer-content">
    <div class="content-logo login">
        <span><img src="${url.resourcesPath}/img/logoSample1.png" alt="Logo" /></span>
    </div>      
</div>

here is the CSS:

div.footer {
    width: 100vw;
    height: 65vh;
    margin: 0px;
    padding: 0px;
    background-size: 100% 100%;
}


.footer {
    margin: 0px;
    padding: 0px;
    height: auto;
    background-image: url('../img/myImage.jpg');
    clip-path: polygon(50% 0%, 100% 9%, 100% 100%, 0% 100%, 0% 9%);
    background-repeat: no-repeat;
    text-align: center;
    background-size: cover;
}

.content-logo.login {
    margin: 0px;
    padding: 0px;
    /*  margin-top: 2rem;*/
}

.content-logo {
    font-family: 'Source Sans Pro', sans-serif;
    position: absolute;
    right: 15px;
    bottom: 40px;
    z-index: 999;
}

Image 1:

enter image description here

Image 2:

enter image description here

My question:

As I test in different devices, as can be seen in image-2 the footer doesnt fit/stays at the bottom on different screen sizes, It cuts the logo and the footer moves up, showing the background colour at bottom. I am able to fit the image by changing the height in above CSS (for example, chnaging in above CSS from "height: 65vh;" to "height: 35vh;" for a mobile screen) to the view port height of different screen sizes, but thats not good as screen sizes can be anything. how can I fit the footer at bottom with logo floating at the bottom right corner irrespective of any screen size ? Its okay if the image gets stretched, the logo should show up in every screen. I am stuck, appreciate all the help here.

Link to footer image just incase : https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpblwwG6gPo00z3cP_4c-lgit81chm13PZjHOxHBlQrGcp3EAuYSEeGj7YCgP510fn3g&usqp=CAU

Tags:

2

Answers


  1. 0

    The problem you have is caused because the content of your website is lower than browser’s window height.

    Check this topic, there is an image that helps you to visualize this issue:
    Forcing footer to bottom of page, if document height is smaller than window height

    To resolve this issue you can set min-height for the middle part of the page to 100% of window height – header height – footer height. Thanks to this middle part of the page will fill available space in height.

    div {
  min-height: calc(100vh - {header height} - {footer height});
}

    or you can add position: fixed; to footer image to put it at the bottom of the page and add some padding at the bottom of body element.

    Login or Signup to reply.
  2. 0

    Add position: fixed and bottom: 0 and left: 0 to your footer class in CSS code, and check if the problem still occurs:

    div.footer {
    width: 100vw;
    height: 65vh;
    margin: 0px;
    padding: 0px;
    background-size: 100% 100%;
}


.footer {
    margin: 0px;
    padding: 0px;
    height: auto;
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpblwwG6gPo00z3cP_4c-lgit81chm13PZjHOxHBlQrGcp3EAuYSEeGj7YCgP510fn3g&usqp=CAU');
    clip-path: polygon(50% 0%, 100% 9%, 100% 100%, 0% 100%, 0% 9%);
    background-repeat: no-repeat;
    text-align: center;
    background-size: cover;
    position: fixed;
    bottom: 0;
    left: 0;
}

.content-logo.login {
    margin: 0px;
    padding: 0px;
    /*  margin-top: 2rem;*/
}

.content-logo {
    font-family: 'Source Sans Pro', sans-serif;
    position: absolute;
    right: 15px;
    bottom: 40px;
    z-index: 999;
}
    <div class="footer footer-content">
    <div class="content-logo login">
        <span><img src="${url.resourcesPath}/img/logoSample1.png" alt="Logo" /></span>
    </div>      
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search