Div does not show image

Question

Div does not show image

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I'm learning how to create websites now and I'm having trouble inserting image into css. When I use the; img src="image.jpg" tag, in the .html file the image appears, however if I put it in the .css file and step to div, it has no sign of it.

I need help I do not know what's wrong

Here is my html and css code:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>RSU</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"/>

    <link rel="stylesheet" href="css/estilo.css" type="text/css" />

  </head>
  <body>

    <div class="top"></div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

.top {
    background-image: url('../imagens/caverna1920.jpg') no-repeat;
    width: 500;
    height: 500;
    background-position: center;
}

html css site

asked by anonymous 24.12.2017 / 22:48

2 answers

Mascara Javascript Condition to appear link does not work

score 2 · Answer 1

Your CSS code is incorrect.

px or % is missing when setting height and width.

The background-image accepts only the image, to use the image and the option no-repeat , use only background

The correct one is:

.top {
    background: url('../imagens/caverna1920.jpg') no-repeat center;
    width: 500px; /* ou 500% */
    height: 500px; /* ou 500% */
}

score 0 · Answer 2

Your error is in using background-image with parameters (eg no-repeat ).

To use parameters in the background image, use only background . Ex.:

background: url('../imagens/caverna1920.jpg') no-repeat;

Another thing is to specify% cos_de% in the dimensions. Without px (or any other pointer), CSS does not recognize the value.

.top {
    background: url('../imagens/caverna1920.jpg') no-repeat;
    width: 500px;
    height: 500px;
    background-position: center;
}

You can even include a background color at the same time as an image:

background: red url('https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg') no-repeat;