-2

olá estou com dificuldades para colocar um fundo em um titulo na minha pagina

trecho em html

 <div id="about-area">
    <div class="container">
       <div class="row">
         <div class="col-12">                    
           <h3 class="main-title fundo">Assinatura Anual  </h3>
         </div>

essa é a imagem

assim esta definido meu css

.main-title {
  color: #fff;
  margin: 0 0 65px 0;
  font-size: 40px;
  text-align: center;
  
}
.main-title.fundo {
  background-image: url('/img/graficofundo.svg');
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center;
  
}

Resultado esperado , como ficou

estou tentando fazer com que a imagem ultrapasse o limite e apareça inteira o tamanho esta bacana mas esta cortando um pedaço em cima e embaixo, tem como fazer essa imagem transpassar seu limite?

1
  • A imagem está no fundo do título. Defina as dimensões do título.
    – bfavaretto
    Commented 23/02 às 17:24

2 Respostas 2

-2

Você deveria adicionar a imagem de fundo à uma div externa do texto e não ao texto em si, algo assim:

<div class="col-12">
    <div class="fundo">
         <h3 class="main-title">Assinatura Anual</h3>
    </div>
</div>

.

.fundo {
  background-image: url('/img/graficofundo.svg');
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center;
  padding: 2rem 1.5rem;
}

adicionei um padding também para dar esse efeito de "ultrapassar" o texto que você comentou

1
  • obrigado Gabriel Vitor, parece fazer mais sentido assim!
    – Felix
    Commented 23/02 às 19:09
-2

Após várias tentativas e pesquisas, consegui resolver meu problema. Vou compartilhar a solução caso alguém que esteja iniciando como eu tenha a mesma dúvida.

  display:block;
  height: 110px;
  color: #fff;
  margin: 0 0 70px 0;
  font-size: 40px;
  text-align: center;
  padding-top: 20px; 
}

.main-title.fundo {
  background-image: url('/img/graficofundo.svg');
  background-size: 450px;
  background-repeat: no-repeat;
  background-position: center;  
}

Consegui solucionar o problema adicionando a propriedade display: block;, que faz com que o elemento ocupe toda a largura disponível do seu contêiner pai. Também defini a altura do elemento para height: 110px;. Adicionei um padding-top: 20px; para criar um preenchimento na parte superior, fazendo com que o texto descesse um pouco sobre a imagem. Na parte do fundo, apenas defini o background-size em 450px.

Não tenho certeza se essa foi a solução mais inteligente ou se foi feita de uma maneira correta, mas o resultado final ficou do jeito que eu queria. Se alguém perceber que algo está errado ou é totalmente desnecessário, por favor, dê uma dica para nós que estamos começando. 😉

O Resulado final ficou assim.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .