Background Color Does not appear on website with background image

Question

Background Color Does not appear on website with background image

Asked 4 years, 1 month ago

Viewed 223 times

-2

I am creating this site but at first I have a problem. I defined an image as background and now the Divs background does not appear. When it is a static background appears normal, but with background image the div background does not appear. someone can explain to me what the problem is?

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>


<body>

    <div class="box">

    </div>

</body>

</html>

CSS:

*{
    border: none;
    background-image: url('brackground.jpg');
    background-repeat: no-repeat;
    margin: 0 auto;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.box
    width: 500px;
    height: 500px;
    background-color: #fff;
}

if this CSS is copied and pasted from what you have, it is missing to open a key after .box.

– jsbueno

2020/05/11 at 13:29
.box
 width: 500px;
 height: 500px;
 background-color: #fff;
} after the .box missing a {

– dippas

2020/05/11 at 13:55
I fixed it but the box still won’t show.

– Peterson Alves

2020/05/11 at 14:40

2 answers

2

You have to change the univeral selector * (which encompasses all) to the body for example, otherwise using * the background-image will override the background-color

body {
  border: none;
  background-image: url('https://placehold.it/400');
  background-repeat: no-repeat;
  margin: 0 auto;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.box {
  width: 100px; /* alterado para o demo */
  height: 100px; /* alterado para o demo */
  background-color: red; /* alterado para o demo */
}

<div class="box"></div>

Browser other questions tagged html css background-color

You are not signed in. Login or sign up in order to post.

by user188554 · Answer 1 · 2020-05-11T15:30:42+00:00

The weight of the selector * is greater than that of the class selector, which will cause the background set in the . box class selector to be superimposed. For the DIV background to work, remove the * and try another selector, it can be body or even another class.