Como definir e posicionar a imagem do cabeçalho wordpress com css
A maioria dos temas do WordPress têm uma imagem de cabeçalho que aparece na parte superior da página. Esta imagem é gerada por um gráfico definido quer no valor CSS para a propriedade que representa a área de cabeçalho ou através do uso de um recurso de cabeçalho personalizado no WordPress.
Conteúdo
- Video: como inserir (alterar ou colocar) imagem da logo em temas do wordpress sem plugin - tema hiero
- Como definir uma imagem de fundo para usar como cabeçalho
- Video: como colocar logo e imagem no cabeçalho wordpress – tema colormag - aula 39
- Video: wordpress - colocar css em páginas facilmente
- Como posicionar, repetir, ou rolar sua imagem de fundo
- Video: wordpress tutorial - insert slideshow into header
Video: Como Inserir (Alterar Ou Colocar) Imagem Da Logo Em Temas Do Wordpress Sem Plugin - Tema Hiero
Como definir uma imagem de fundo para usar como cabeçalho
No WordPress padrão Vinte Treze tema, incluindo uma imagem de cabeçalho personalizado em um site que usa o tema Vinte Treze é muito danado fácil. Todo o trabalho duro foi feito para você.
Em temas que não têm o recurso de imagem de cabeçalho personalizado, você pode facilmente definir uma imagem de fundo para a imagem de cabeçalho usando CSS. Para os fins deste exemplo, a marcação HTML para o cabeçalho no modelo é
No CSS (style.cssarquivo), você pode usar uma imagem de fundo, definindo-o nas propriedades CSS #cabeçalho. Utilize este código:
Video: Como colocar logo e imagem no cabeçalho WordPress – Tema ColorMag - Aula 39
#header {background: url (/images/header-image.jpg) no-repeat-width: 980px; height: 100px;}O valor de fundo indica uma cabeçalho-imagem.jpg imagem. Para essa imagem para aparecer no seu site, você precisa para criar a imagem e enviá-lo para o seu servidor web na / imagens / diretório.
Video: Wordpress - Colocar Css em páginas facilmente
Ao trabalhar com gráficos na web, é uma boa idéia usar formatos de imagem GIF, JPG ou PNG. Para imagens com um pequeno número de cores (como gráficos, linha arte, logotipos, e assim por diante), o formato GIF funciona melhor. Para outros tipos de imagens (screenshots com texto e imagens, a transparência misturada, e assim por diante), use JPG ou PNG.
Como posicionar, repetir, ou rolar sua imagem de fundo
Depois de carregar um gráfico para usar em seu tema, você pode usar as propriedades de fundo CSS para posicioná-la. As principais propriedades CSS - -fundo posição, fundo de repetição, e background-attachment - ajuda você a atingir o efeito desejado.
| Propriedade | Descrição | valores | Exemplo |
|---|---|---|---|
| -fundo posição | Determina o ponto de partida de sua imagem de fundo no seu página da web | centro da parte inferior, parte inferior direita, centro-esquerda, centro direita, centro centro | background-position: centro-bottom |
| fundo de repetição | Determina se a sua imagem de fundo vai repetir ou telha | repetição (repete infinitamente), repetir-y (repete na vertical), repeat-x (repete horizontalmente), no-repeat (não repetir) | background-repeat: repeat-y- |
| background-attachment | Determina se a sua imagem de fundo é fixa ou rola com a janela do navegador | rolagem fixo | background-attachment: scroll- |
Digamos que seu objetivo é telha, ou repetir, a imagem de fundo horizontalmente, ou do outro lado da tela do navegador da esquerda para a direita, de modo que ele pode ser expandido com a largura do navegador em qualquer computador. Você também quer mudar a cor de fundo para uma cor diferente (como branco, como no exemplo a seguir). Para conseguir isso, abra a folha de estilo de novo e mudar:
background: # f1f1f1-
para
background: # FFFFFF-background-image: url (images / header-image.jpg) -background-repeat: repeat-x-
ou você pode usar
Video: WordPress Tutorial - Insert Slideshow into Header
background: url #FFFFFF (images / header-image.jpg) repetir-x-