How to overwrite an image without absolute? HTML + CSS [closed]

Navigation
-2

My goal is to insert a background image that can be written above with <h2>, <p> and etc on top of it, but without using the position: absolute as this interferes with the sub-menus of the page appearing texts and above of them when displayed !!

    
asked by anonymous 24.09.2018 / 06:10

2 answers

1

Here is an example, using background-size: cover , it resets the size to be supported inside the container you want, in this case all <section> , even having to stretch the image or cut some of it: 

.main-section{
  background-image: url(https://i.imgur.com/ODmMf1p.jpg);
  background-size: cover;
  height: 400px;
  color: #FFFFFF;
  text-align: center;
}
.main-section h2{
  font-size: 30px;
}
.main-section p{
  font-size: 20px;
}
<section class="main-section">
  <h2>Título Aqui</h2>
  <p>Texto Aqui</p>
<section>
    
24.09.2018 / 13:49
0

I do not know if I understood correctly, but I could try it this way. Applies content inside < header > and via css apply. 

header {
  background-image:url('add caminho imagem');
  width: 100%;
}
    
24.09.2018 / 09:45
Concatenate string [closed] How to update a div every x seconds?