1

Tenho algumas páginas com um jumbotron de mesma formatação em cada página. Preciso que tenham background-image diferente em cada página.

Como posso dar uma ID para cada um desses jumbotrons, para poder editar seu background-image, sem mexer nas outras configurações tipo font-size, font-family, etc?

.titulo{
  font-size: 4em;
  font-weight: bolder;
  font-family: "oswald"
}

.jumbotron{
  background-image: url("../imagens/jumbotron/bg-mochilas.jpg");
  background-size: cover;
}
2
  • se forem em paginas diferentes, voce pode até instanciar com base nos ids da páginas se elas tiverem um id, #index .jumbotron... O fato de ele ser mais especifico, sobreporá as demais. outra alternativa é voce ter um class para cada jumbotron ex: class="jumbotron primeiro" e no css .primeiro alterar a imagem pra cada class. 3/06/2015 às 17:57
  • Michel, muito Obrigado pela dica! Resolvido. 3/06/2015 às 18:20

1 Resposta 1

1

Você não precisa necessariamente de id's diferentes, pode fazer usando classes mesmo, veja:

.jumbotron.success {
    background-color: #4CAF50;
}
.jumbotron.warning {
    background-color: #FF9800;
}
.jumbotron.danger {
    background-color: #F44336;
}
.jumbotron#beach {
    background-color: transparent;
    background: url(beach.jpg) no-repeat;
    color: #fff;
}

O seletor .jumbotron.nome-da-classe especifica um elemento que tem as duas classes, você pode fazer o mesmo com um id: .jumbotron#id, o uso fica assim:

<!-- Exemplo com classe -->
<div class="jumbotron danger">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
<!-- Exemplo com ID -->
<div class="jumbotron" id="beach">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
1
  • Eduardo, muitíssimo obrigado. Usei .Class com #Id Resolvido! Ótima dica. 3/06/2015 às 18:21

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 .