Div shows no picture

Question

Div shows no picture

Asked 6 years, 12 months ago

Viewed 563 times

0

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

I need help I don’t know what’s wrong

Here’s 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;
}

2 answers

Browser other questions tagged html css website

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

by Valdeir Psr • **10,804** points · Answer 1 · 2017-12-24T21:51:00+00:00

Your CSS code is incorrect.

Is missing the px or % when defining height and width.
The background-image accepts only the image, to use the image and the optionno-repeat, use only background

The correct is:

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

by Sam • **79,597** points · Answer 2 · 2017-12-24T22:00:51+00:00

Your mistake 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 px in the dimensions. Without px (or any other indicator), the 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;