How to insert an image via CSS? [closed]

Navigation
-1

Follow my HTML code: 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"/>
    <title>web page</title>
    <link rel="stylesheet"  type='text/css' href="css/estilo.css"/>
</head>
<body>
<div id="principal">
<section id="corpo">
<header>
    <hgroup>
        <h1>#desafio100videos &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Faltam 13 videos</h1>

        <ul id="imagens">
            <li id="01"></li>
            <li id="02"></li>
            <li id="03"></li>
            <li id="04"></li> 
            <li id="05"></li>
            <li id="06"></li>
        </ul>

    </hgroup>
</header>
</section>
</div>
</body>
</html>


Segue meu código CSS:
@charset "UTF-8";

section#corpo {
    width: 1300px;
    padding-right: 20px;
    padding-left: 20px;
    font-family: Blippo, fantasy;
}


ul#album-fotos {
    width: 700px;
    margin: 0 auto;
    padding: 50px;
    overflow: hidden;
    list-style: nome;
}

ul#imagens li{
    float: left;
    width: 225px;
    height: 165px;
    margin: 10px;
    border: 5px, solid #ffffff;
    background-color: #ffffff;
    box-shadow: 1px 1px 3px rgba(0, 0, 0,.4);
    -webkit-transition: all .4s ease-in;
}

ul#imagens li span{
    opacity: 0;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000000;
    background-color: rgba(0, 0, 0, .3);
    font-size: 9pt;
    line-height: 370px;
    padding: 5px;
}


ul#imagens li#01{
    background-image: url('../img/_text.png');
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}

ul#imagens li#01:hover{
    background-position: 0px 0px;
    background-size: 200px 200px;
}
    
asked by anonymous 05.01.2019 / 20:18

1 answer

3

Your problem is that you have put ID as number! You should not use numerals as the name of ID

A HTML5 documentation does not go into too much detail than it can or not be used as a value for the ID, but the HTML4 documentation is more restrictive, and it may be that the browser engine takes this rule into account.

  

ID and NAME tokens must begin with a letter ( [A-Za-z] ) and may be followed by any number of letters, digits ( [0-9] ), hyphens % "), underscores (" - "), colons (" _ "), and periods (" : ").

In short ID and names should start with letters (including HTML and CSS are case sensitive!) . is different from *N*ome

Source: link

See the example below. The div that the nome that is in letters takes the style, since the one that has ID with number does not take the style. 

div#nome <!-- OK -->

div#01 <!-- ERRO -->

div#texto01 <!-- OK -->

OBS However you can put numbers in ID , as long as it is not the first character!

Note that ID with div did not render CSS because 2 starts with a numeral! 

div {
  border: 1px solid #000;
}
div#nome {
  width: 100px;
  height: 100px;
  background-color: red;
  background-image: url(https://placecage.com/100/100);
}
div#01 {
  width: 100px;
  height: 100px;
  background-color: red;
  background-image: url(https://placecage.com/100/100);
}
div#texto01 {
  width: 100px;
  height: 100px;
  background-color: red;
  background-image: url(https://placecage.com/100/100);
}
html {color:red}
<div id="nome">1</div>
<div id="01">2</div>
<div id="texto01">3</div>
    
05.01.2019 / 20:43
How to change the appearance of the site according to the device used, without requiring client or server script? [closed] How to align menu using CSS (Only) [closed]