How to insert an image via CSS?

Asked

Viewed 66 times

-2

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;
}
html css html5 css3 front-end

  • Bruno as @Maujor commented below the tab <hgroup> it should no longer be used as it is obsolete, read about here: https://answall.com/questions/331928/qual-outra-tag-pode-ser-utilizada-para-substr-o-hgoup

  • Thank you very much!

1 answer

3

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

To HTML5 documentation does not give many details of what may or may not be used as 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 summary ID and names should start with letters (including HTML and CSS are High Box sensitive!) *N*ome is different from nome

Source: https://www.w3.org/TR/html4/types.html#type-id

See in the example below. A div que o ID that is with letters picks up the style, since has ID number does not take style. 

div#nome <!-- OK -->

div#01 <!-- ERRO -->

div#texto01 <!-- OK -->

OBS However you can put numbers on ID, as long as it’s not the first character!

Note that the div with the 2 did not render the CSS ID begins 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>

  • @Brunosuarez - The element hgroup has been removed from HTM5 and its use should be avoided. alternative marking alternatives to replace this element

  • @Maujor, I think you wanted to comment on Bruno’s question. How I assembled this template of my reply in hand without using the code that Bruno posted turned out that I didn’t notice that he had used the tag <hgroup> that as you mentioned is in disuse. And even by coincidence I had already included this link alternative that you posted in the same question you also had already answered about hgroup here: https://answall.com/questions/331928/qual-outra-tag-pode-ser-utilizada-para-substr-o-hgoup/331951#331951

  • 1

    Perfect! My apologies, the comment really was in Bruno’s question.

  • @Maujor without problems my dear, I also made a mistake rss, the link I wanted to talk about is this one: https://answall.com/questions/27077/tag-hgroup-est%C3%A1-unused/ . There are a few days I include there a reply talking about a possible alternative to the tag hgroup using the tag header

  • Thanks for the personal help.

  • @Brunosuarez how good it worked out! If my reply helped you in any way consider marking it as Accept, in this icon ✔ below the arrows on the left side of my answer :) so the site does not get open questions pending no answer accepted even having already been solved.

Show 1 more comment

Browser other questions tagged html css html5 css3 front-end

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