0

Why does my CSS background shorthand property not work? I have applied many processes, but it's not working.

* {
  padding: 0;
  margin: 0;
}

.container {
  width: 800px;
  height: 800px;
  margin: 0 auto;
  border: solid 2px;
  background: red url(image/computer.png) no-repeat cover fixed;
}

<div class="container">
</div>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
DIP KR GUCHAIT
  • 13
  • 5
  • the below answer is not accurate, you don't need quotes and you can keep "cover" inside background BUT you need to also specify the position (ex: `center / cover` ) – Temani Afif Jan 17 '22 at 08:38

1 Answers1

0

Two problems you have to fixed:

You doesn't have the "" for the url.

You have to separately set the background-size:cover property.

Set it in the background will not work.

*Not sure if image/computer.png is a local image or an invalid image. If it is a local image, just replace the url back (I change the url to wikipedia icon for showing purpose)

*{
         padding: 0;
            margin: 0;
        }
        .container{
            width: 800px;
            height: 800px;
            margin: 0 auto;
            border: solid 2px;
            background: red url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/2244px-Wikipedia-logo-v2.svg.png")  0 0 no-repeat fixed;
           
        }
<div class="container">
    
        </div>
James
  • 2,732
  • 2
  • 5
  • 28
  • it's work fine.but sir when i use this property in one line. it's does not work .what are the actual problem .can you explain? i want to use this property in one line. – DIP KR GUCHAIT Jan 17 '22 at 02:26
  • @DIPKRGUCHAIT, it is because you doesn't specify the background-position property in the background shorthand. I updated the code where I specify the background position in the background shorthand. – James Jan 17 '22 at 02:34