Definir e posicionar sua imagem de cabeçalho com css em wordpress vinte quinze
A maioria dos temas têm uma imagem de cabeçalho que aparece na parte superior da página. Em WordPress, 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
Definir uma imagem de fundo para usar como cabeçalho
No WordPress tema padrão Vinte Quinze, incluindo uma imagem de cabeçalho personalizado em um site que usa o tema Vinte Quinze é muito danado fácil. Todo o trabalho duro foi feito para você.
Video: CSS Fixed Headers
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:
#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: Change Site Header CSS On Scroll
Ao trabalhar com gráficos na web, você deve 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.
Posicionamento, repetindo, ou rolagem 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. Confira as propriedades do fundo CSS e seus valores disponíveis para alterá-los em sua folha de estilo tema.
| Propriedade | Descrição | valores | Exemplo |
|---|---|---|---|
| -fundo posição | Determina o ponto de partida de sua imagem de fundo no seu página da web | inferior centralcanto inferior direitocentro-esquerdacentro-direitacentro | background-position: centro-bottom |
| fundo de repetição | Determina se a sua imagem de fundo vai repetir ou telha | repetir (Repete infinitamente) repetir-y (Repete na vertical) repeat-x (Repete na horizontal) 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 | Fixedrolagem | background-attachment: scroll- |
Você pode explorar o posicionamento do cabeçalho gráfico com alguns dos valores fornecidos acima. Se você é uma pessoa visual, você vai desfrutar de valores testes e ajustes para ver os efeitos em seu site.
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
Video: WordPress - How to remove elements with CSS
background: # FFFFFF-background-image: url (images / header-image.jpg) -background-repeat: repeat-x-
ou você pode usar
background: url #FFFFFF (images / header-image.jpg) repetir-x-