'CSS image as background

I want to use an transparent image for my html background. located at bottom left of .sidebar the background color has to follow the sidebar background. the image should stay there whenever the page or sidebar is scrolled.

enter image description here

the following is my css

.wrapper .sidebar .logopic {
    background: #276eff;
    position: fixed;
    top: 700px;
    width: 250px;
    height: calc(20% - 9%);
    background: url("https://image.similarpng.com/very-thumbnail/2020/12/Colorful-google-logo-design-on-transparent-PNG-1.png")bottom left no-repeat;
    background: transparent;
    background-size: 300px 100px;
    background-attachment: fixed;
    height: 90vh;
}

Please advise. and this is the fiddle css

htmlcss


Solution 1:[1]

Try this code instead

CSS

.logopic {
    width: 50px;
    height: 50px;
    float: bottom;
    position: fixed;
}

HTML

<img url="https://image.similarpng.com/very-thumbnail/2020/12/Colorful-google-logo-design-on-transparent-PNG-1.png" alt="img"class="logopic">

https://jsfiddle.net/2cux6fmh/5/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions