Como colocar uma textura no menu vertical flutuante?

[allancarlos123]

Olá galera, boa noite.

sou novo aqui no fórum e já tenho uma pergunta...

Como posso colocar uma textura em imagem em cada opção desse menu vertical?

Aqui vai o site onde está ele: http://www.leandrodias.net/web/artigos-css/menu-flutuante-com-jquery-e-css/

(junto do site tem a página demo, demostrando o menu)

já tentei "background-image" no lugar de "background-color" e nada

[DiF]

então você tentou errado amigo.. porque funciona sim. alias.. você tentou mesmo?

.menu-flutuante ul li a:hover {
        background-color:#090;
        background: url(img/textura.jpg);
        color:#000;
    }

veja se nao errou o caminho da imagem.

[allancarlos123]

RESOLVIDO

eu coloquei

background-image: url("botao1.png");

background-position: 50% 50%;

background-repeat: no-repeat;

Obrigado a quem ajudou ai em cima ;D

[DiF]

vou te dar uma boa dica. você pode colocar todos esses atributos em uma unica linha.

exemplo:

background: url("botao1.png") 50% 50% no-repeat;

em minha opiniao é melhor do que usar com 3 linhas

[Urubu_Nicolas]

vou te dar uma boa dica. você pode colocar todos esses atributos em uma unica linha.

exemplo:

background: url("botao1.png") 50% 50% no-repeat;

em minha opiniao é melhor do que usar com 3 linhas

A sugestão do dif é bem-vinda, você pode fazer o código tudo em uma linha. Este mesmo esquema equivale para a font. Em vez de:

font-size: 12px;
font-faily: Arial, Verdana, Tahoma;

Você pode usar:

font: 12px Arial, Verdana, Tahoma;

Estas otimizações do código deixam ele mais fácil e acessível.

[DiF]

exato, e tem mais motivos para a semantica da estrutura do css ser melhor alem de otimizar e deixar mais rápido o carregamento:

exemplo:

estilo.css

#topo{
   width: 100%; 
   height: 100px;
   background-color: blue;
   display: block;

}

#conteudo{
    width: 400px;
    height: 500px;
    font-family: arial;
    font-weight: bold;
    margin: 10px;
    border-radius: 20px;
    display:block;
}

agora olha esta diferença:

#topo{width: 100%; height: 100px; background: blue; display: block;}

#conteudo{ width: 400px; height: 500px; display: block; font: 12px Arial, Verdana, Tahoma bold; margin: 10px; border-radius: 20px; }

note que no segundo.. fizemos em duas linhas.. enquanto no primeiro tem 15 linhas.

obviamente quem levará menor tempo de carregamento será o segundo exemplo... então é melhor.