Scribd Logo
Upload

Welcome to Scribd!

  • Adding Logo On Top With Responsive Image

    Uploaded by

    Filip
    6 views6 pages
    This document provides instructions on how to add a logo image on top of another background image using HTML and CSS. It uses a container div to hold both images, positions the logo image absolutely within the container, and sets properties like bottom, right, height and width to place it in the desired location over the background image. It also includes a media query to adjust the logo image size and position for smaller screens.

    Original Description:

    Original Title

    Adding Logo on Top With Responsive Image

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides instructions on how to add a logo image on top of another background image using HTML and CSS. It uses a container div to hold both images, positions the logo image absolutely within the container, and sets properties like bottom, right, height and width to place it in the desired location over the background image. It also includes a media query to adjust the logo image size and position for smaller screens.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views6 pages

    Adding Logo On Top With Responsive Image

    Uploaded by

    Filip
    This document provides instructions on how to add a logo image on top of another background image using HTML and CSS. It uses a container div to hold both images, positions the logo image absolutely within the container, and sets properties like bottom, right, height and width to place it in the desired location over the background image. It also includes a media query to adjust the logo image size and position for smaller screens.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    How to add Logo on top

    of an Image using HTML


    and CSS
    <div class="container">
    <img
    src="https://images.unsplash.com/photo-
    1668696381185-46c77ee52d1a?ixlib=rb-
    4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx
    8fGVufDB8fHx8&auto=format&fit=crop&w=1169&
    q=80" alt="Norway"
    style="width:100%;height:100%;object-
    fit:cover;">
    <div class="text-block">
    <img class="imgTweet"
    src="https://media.licdn.com/dms/image/D56
    03AQGlAKg3-wYJfQ/profile-displayphoto-
    shrink_100_100/0/1673881422308?
    e=1679529600&v=beta&t=bcdCh-
    yjnK28gpIGGraGWMfGuIxV8lJQkahA0wts5vk" />
    </div>
    </div>
    .container {
    position: relative;
    height:600px;
    }
    .text-block {
    color: white;
    }
    .imgTweet{
    position: absolute;
    bottom: 50px;
    right: 50px;
    height:auto;
    width:120px;
    border-radius: 10px;
    }
    @media (max-width:600px){
    .imgTweet{
    width:80px;
    height:auto;
    bottom:30px;
    right:30px;
    }
    }
    For full code.
    https://codepen.io/jeevankaree/pen/VwdrRwN

    You might also like