How to overwrite an image without Absolute? HTML+CSS

Asked

Viewed 288 times

-2

My goal is to insert a background image that can be written over with <h2>, <p> etc above it, but without using the position: Absolute because it interferes with page sub-menus by displaying text and etc above them when displayed !!

html css html5 css3

  • Cara puts what you already have of code there, HTML and CSS, the way you got it without the code does not give you a precise answer... Maybe the problem isn’t even the position, but the way you

2 answers

1


Here follows an example, using background-size: cover, it resets the size to be supported inside the container you want, in this whole case <section>, even if you have to stretch the image or cut a bit 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>

0

I’m not sure I understand, but I could try it this way. Apply content within <header> and via css apply.

header {
  background-image:url('add caminho imagem');
  width: 100%;
}

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.