o index esta assim:
<html>
<head>
<link href="css/test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="background-menu">
<div id="barra">
</div>
<div id="logo">
<a href="#"><img src="img/logo.png"></a>
</div>
<div id="menu">
<ul>
<li id="home1"><a href="#" id="home">Inicio</a></li>
<li id="servicos2"><a href="#" id="servicos">Serviços</a></li>
<li><a href="#" id="login">Login</a></li>
<li><a href="#" id="registrar">Registrar</a></li>
<li><a href="#" id="faleconosco">Fale conosco</a></li>
</ul>
</div>
<div id="BD">
<div id="lupa">
<a href="#l">
<img src="img/lupa.png">
</a>
</div>
<div id="carrinho">
<a href="#c">
<img src="img/carrinho.png" alt="Carrinho de Compras">
</a>
</div>
<div id="entrar">
<a href="#e">
<img src="img/entrar.png" alt="Entrar">
</a>
</div>
</div>
</div>
<header>
<div class="conteudo">
<h1>Agiltec</h1>
</div>
</header>
<footer>
<div id="footer-texto"><p>Copyright 2019 - AGILTEC</p></div>
</footer>
</body>
</html>na div barra eu tentei por uma imagem. o código css está assim:
@charset "UTF-8";
body {
margin:0;
padding:0;
}
/*MENU*/
#background-menu {
display: flex;
flex-direction: column;
align-items: center;
margin-left:auto;
margin-right:auto;
width: 100%;
height: 40px;
background: linear-gradient(0deg, rgba(193, 188, 188, 0.31) 0%,rgba(255, 255, 255, 0.27) 100%);
border-bottom: solid 2px #000;
}
#menu {
top:-10px;
position: absolute;
left: 200px;
display:flex;
}
#menu ul {
display: inline-flex;
list-style:none;
}
#menu ul li {
padding:7px;
}
#menu ul li a{
color:#000;
font-size:13px;
text-decoration:none;
}
#menu ul li a:hover{
color:#06697d;
border-bottom: #000 1px solid;
border-collapse: 10px;
border-bottom-width: 1.8px;
}
#logo {
position: absolute;
left: 90px;
}
#carrinho img{
display: flex;
position: relative;
top:5px;
left:40px;
width: 20px;
height: 20px;
}
#lupa img{
display: flex;
position: relative;
top:6px;
left: 25px;
width: 17px;
height: 17px;
}
#entrar img{
display: flex;
position:relative;
left:50px;
width:30px;
height: 30px;
}
#BD {
display: flex;
position: absolute;
right:100px;
top:5;
}
/*END MENU**/
/*CONTEUDO*/
header{
height: 60vh;
justify-content: center;
background-size: cover;
background-position: center;
color: #f1f1f1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20%;
}
.conteudo{
margin-bottom: 50%;
}
.conteudo h1{
color: #000;
}
/*END CONTEUDO*/
/*Footer*/
footer {
padding: 10px;
background: #f2f2f2;
}
footer p{
text-align: center;
padding: 10px;
font-family:Cabin Condensed;
color:#000;
text-align:center;
margin-top:40px;
}
/*END FOOTER*/
/*Media queries*/
@media screen and (min-width: 900px) and (max-width: 1090px){
#menuD {
display: flex;
position:relative;
left:400px;
top:-72px;
}
}
@media screen and (min-width: 860px) and (max-width: 899px){
#menuD {
display: flex;
position:relative;
left:350px;
top:-72;
}
}
@media screen and (min-width: 0px) and (max-width: 859px){
#menuD {
display: flex;
position:relative;
left:350px;
top:-72;
}
#barra {
background:url(../img/barra.png)no-repeat;
}
}no bloco de código:
@media screen and (min-width: 0px) and (max-width: 859px){
#menuD {
display: flex;
position:relative;
left:350px;
top:-72;
}
#barra {
background:url(../img/barra.png)no-repeat;
}
}eu escrevi esse código "background:url(../img/barra.png)no-repeat;" pra carregar na div "barra", mas a imagem não aparec
