css Question posted in
Some basic documentation can be found here.

Css – Background-image not displaying despite checking the usual problems

I am uploading an image using background-image in css, and despite making sure the file path is correct and substituting another image for the original to see if the original image was the problem, I can not get the image to display. I know the file path is correct because I use VScode and it auto fills when I start typing. I also checked to make sure that my styles.css file was correctly entered by adding other css commands into the stylesheet, which worked.

Here is my code:

.header-image {
    background-image: url("images/image.png");
    background-size: cover;
}
 <section class="header-image container-fluid">
 </section>
Tags:

2

Answers


  1. 0

    You need to provide height to the image, and width accordingly.

    .header-image {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4Ni-Mk_BC1FX6wSH1QXsQKG3HNneBVwZGmg&s");
  background-size: cover;
  height: 300px;
}
    <section class="header-image container-fluid">
</section>
    Login or Signup to reply.
  2. 0

    you are applying a background image via css to a section element. The section needs an explicit height for the background image to be visible.

    You can add content to the section element and verify it, the image will be visible for the content in the section.

    If you do not want to add content to your section element try with the below styles by adding an explicit height in vanilla css.

    .header {
        height: 800px; /* Fixed height */
        /* height: 100vh; Set height to full view height */
        &.header-image {
          background-image: url('https://www.lastwordonnothing.com/wp-content/uploads/2012/10/800px-Eichh%C3%B6rnchen_D%C3%BCsseldorf_Hofgarten_Crisco_edit2.jpg');
          background-size: cover;
        }
      }
    <section class="header header-image container-fluid"></section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search