Responsive image with background cover

Asked

Viewed 59 times

-1

I’m trying to make this image responsive with background cover, but the image is not showing, I tested on H1 to see if it was css, but I don’t know where the error.

#imagem {
         background: url(https://i.imgur.com/Y7V4zrd.png) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        
h1{
    color: chartreuse;
}
    <div id="imagem"></div>
    <h1>TEXTO</h1>

I know the cover property is the most effective way to make the image responsive so I’m trying to use it.

css

1 answer

0


#imagem {
  background: url(https://i.imgur.com/Y7V4zrd.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
        
h1{
    color: chartreuse;
}
  <div id="imagem">
    <h1>TEXTO</h1>
    <h1>TEXTO 2</h1>
  </div>

  • Thanks vlw, I just didn’t understand where I went wrong, I tried harder I didn’t find.

  • You opened the div and closed right after, putting nothing inside it, so your background was not visible, as your div contained nothing. What I did was just put the lock on your div after the H1 tag.

  • vlw accepted the answer

Browser other questions tagged css

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