hello Jas,'

Yes, it's possible to place a button on top of an image or banner in Odoo (or any web page) and ensure it stays correctly positioned across all screen sizes, including mobile view. This requires using proper CSS styling with responsive design principles.

for example >

.image-container {

    position: relative; /* Establish a positioning context for child elements */

    width: 100%; /* Ensure the container adjusts to the image size */

}

.banner-image {

    display: block;

    width: 100%; /* Make the image responsive */

    height: auto; /* Maintain aspect ratio */

}

.btn-overlay {

    position: absolute; /* Position relative to the container */

    top: 50%; /* Center vertically */

    left: 50%; /* Center horizontally */

    transform: translate(-50%, -50%); /* Adjust position to the center */

    background-color: #ff5733; /* Button background color */

    color: white; /* Text color */

    padding: 10px 20px; /* Add padding */

    border: none; /* Remove border */

    border-radius: 5px; /* Add rounded corners */

    cursor: pointer; /* Change cursor on hover */

    z-index: 10; /* Ensure it stays on top */

}

@media (max-width: 768px) { /* Adjust for mobile screens */

    .btn-overlay {

        padding: 8px 16px; /* Reduce button size */

        font-size: 14px; /* Adjust text size */

    }

}