Title: custom Back Image
Last modified: 22 novembro, 2019

---

# custom Back Image

 *  [samuelseixas](https://br.wordpress.org/support/users/samuelseixas/)
 * (@samuelseixas)
 * [6 anos, 6 meses atrás](https://br.wordpress.org/support/topic/custom-back-image/)
 * Boa Tarde, estou terminando um tema para WP e preciso colocar uma imgem de fundo
   dentro de uma div e permitir que o usuario possa troca-la no dashboard. Como 
   faco para colocar um background image dinamico?
    Socorro!
    -  Este tópico foi modificado 6 anos, 6 meses atrás por [samuelseixas](https://br.wordpress.org/support/users/samuelseixas/).
 * A página que eu preciso de ajuda: _[[fazer login](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fbr.wordpress.org%2Fsupport%2Ftopic%2Fcustom-back-image%2F%3Foutput_format%3Dmd&locale=pt_BR)
   para ver o link]_

Visualizando 1 resposta (de um total de 1)

 *  [theandersonn](https://br.wordpress.org/support/users/theandersonn/)
 * (@theandersonn)
 * [6 anos, 6 meses atrás](https://br.wordpress.org/support/topic/custom-back-image/#post-12167604)
 * Existe algumas formas de implementar… segue uma:
 * 1. Faça a marcação no seu html
 *     ```
       <div class="SUA-DIV" style="background-image: url('<?php bloginfo('template_url'); ?>/static/images/SEU-BG.jpg');">
       ... conteúdo
       </div>
       ```
   
 * 2. Estilize com CSS
 *     ```
       .SUA-DIV {
           background-repeat: no-repeat;
           background-position: center center;
           background-size: cover;     
       }
       ```
   
 * OBS1: Onde está ‘SUA-DIV’ troque pela classe que vc está utilizando e acrescente
   estilizações adicionais para a seção, mas basicamente já está aparecendo o background.
 * OBS2: Normalmente esse background é puxado pela classe CSS, mas como a ideia 
   é deixar gerenciável puxamos ele na própria div com css inline.
 * Agora… é implementar na administração do WordPress, tbm existe formas diferentes…
   uma delas bem comum é usando o plugin ACF.
 * Já está usando em seu tema?
 * Se não, instale:
    [https://br.wordpress.org/plugins/advanced-custom-fields/](https://br.wordpress.org/plugins/advanced-custom-fields/)
 * Você precisa desse ‘Field Type’, no link segue como criar na seção gerenciável
   do plugin e como exibir o dado em seu front-end:
    [https://www.advancedcustomfields.com/resources/image/](https://www.advancedcustomfields.com/resources/image/)
 * No fim a sua div que estava estática terá esse código:
 * Para você resgatar a imagem que o usuário fez o upload, se estiver usando um 
   loop pegue com `$SEU_BG = get_field( 'BG' );`
 * Caso não esteja utilizando um loop, passe por parâmetro o ID da página/post onde
   o usuário está fazendo o upload, nesse caso o dado que será retornado será no
   formato array, faça o tratamento e exiba o dado, a vantagem nesse caso é que 
   você não precisa do loop, porque o id já está sendo passado.
 *     ```
       <div class="SUA-DIV" style="background-image: url('<?php echo $SEU_BG; ?>');">
       ... conteúdo
       </div>
       ```
   

Visualizando 1 resposta (de um total de 1)

O tópico ‘custom Back Image’ está fechado para novas respostas.

## Tags

 * [#backgroundimage #suporte #desenvolvedor](https://br.wordpress.org/support/topic-tag/backgroundimage-suporte-desenvolvedor/)

 * Em: [Desenvolvendo com WordPress](https://br.wordpress.org/support/forum/questoes-avancadas/)
 * 1 resposta
 * 2 participantes
 * Última resposta de: [theandersonn](https://br.wordpress.org/support/users/theandersonn/)
 * Última atividade: [6 anos, 6 meses atrás](https://br.wordpress.org/support/topic/custom-back-image/#post-12167604)
 * Estado: não resolvido

## Tópicos

### Tópicos mais populares

### Tópicos sem respostas

### Tópicos não relacionados a suporte

### Tópicos resolvidos

### Tópicos não resolvidos

### Todos os tópicos