I have image of laptop with empty background. How can I fill only that specific empty part of image with some background color?

user_13849990 0
Viewed 83

enter image description here

I want to fill that empty background with color, also that background should be responsible with the image. Can be done with CSS?

css html
3 Answers

You can use a background gradient(or an image), background-size, background-position and no-repeat to set it under the area of the screen.

example:

img {
  background: /*linear-gradient(blue,blue)*/
  /* choose the gradient for a color, see hover effect */
  /* or use an image of the appropriate ratio */
  url(https://i.picsum.photos/id/102/1129/751.jpg?hmac=uS-7B0eUG3Sd1mZHONp80fqhpDZ6g09ZoD7aw7l8tAo) 50% 1%/ 80% 80% no-repeat;
  display: block;
  margin: auto;
  max-width: 70%;
  filter: drop-shadow(0 0 10px silver)
}

img:hover {
  background-image: linear-gradient(blue, blue);
}

html {
  display: grid;
  min-height: 100vh;
  background: #444
}

body {
  margin: auto;
}
<img src=https://i.stack.imgur.com/pu2YY.png>

filter can also be used if you want to add a shadow (or else) effect.

user_24420990

you want this?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        .main{
            position: relative;
        }
      
           .bg-color {
    background-color: rgb(177, 50, 50);
    height: 251px;
    width: 447px;
    position: absolute;
    z-index: 1;
    left: 168px;
    top: 16px;
}

        .img
        {
            position: absolute;
            z-index: 0;
            left: 8%;
        }

        

        @media (min-width:500px) and (max-width:900px){
            .bg-color {
                background-color: rgb(177, 50, 50);
                height: 251px;
                width: 452px;
                position: absolute;
                z-index: 1;
                left: 96px;
                top: 16px;}
        }
        
        @media (min-width:700px) and (max-width:1300px){
            .bg-color {
                background-color: rgb(177, 50, 50);
                height: 251px;
                width: 452px;
                position: absolute;
                z-index: 1;
                left: 156px;
                top: 16px;}
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="bg-color">
        </div>
        <div class="img">
            <img src="https://i.pinimg.com/564x/48/ce/e8/48cee83121a363a248640dbf54778d87.jpg" alt="">
        </div>
    </div>
    
    
</body>
</html>

user_163601620

In the same as you used do background color using background-color property look at these image with transparent background with two different colors in the background color. the only difference is that the image you are using doesn't have the transparent background.

img {
background-image: black;
}

enter image description here

img{
background-color: blueviolet;
}

enter image description here

user_149574550
Related