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.

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.

PropriedadeDescriçãovaloresExemplo
-fundo posiçãoDetermina o ponto de partida de sua imagem de fundo no seu
página da web
inferior centralcanto inferior direitocentro-esquerdacentro-direitacentrobackground-position: centro-bottom
fundo de repetiçãoDetermina 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-attachmentDetermina se a sua imagem de fundo é fixa ou rola
com a janela do navegador
Fixedrolagembackground-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-

Publicações relacionadas