background image is not displaying

Question

I am trying to display a background image in my CSS and have used the relative path to the image. I have tried using different browsers but nothing seems to work. Below is my HTML.

<header>
  <h2><a href="#">Rachel Doyle Studio</a></h2>
  <nav>
    <li><a href="#">Home</a></li>
    <li><a href="#">Embroidery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </nav>
</header>
<section class="thimble">
  <div class="background-image" style="background-image: url(assets/img/art-arts-and-crafts-bright-colours-2564890.jpg)"></div>

  <div class="thimble-content-area">
    <h1>Rachel Doyles Studio</h1>
  </div>
</section>

and below is the CSS styling for the class of background-image.

.thimble background-image {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}

I have attached a picture of the structure of my files.

Why is it doing this even though I have the correct path to jpeg.

.thimble background-image. You need a . in front f background-image. It is a class. — SScotti
– SScotti, Commented Jul 9, 2019 at 22:04
Probably better to not use that as a class name to avoid confusion really. — SScotti
– SScotti, Commented Jul 9, 2019 at 22:04

Piyush Teraiya · Accepted Answer · 2019-10-17 12:09:06Z

1

You can use this code

body {
  margin: 0;
}

.thimble .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: url('https://www.w3schools.com/images/picture.jpg');
  background-repeat: no-repeat;
  z-index: -1;
}

<header>
  <h2><a href="#">Rachel Doyle Studio</a></h2>
  <nav>
    <li><a href="#">Home</a></li>
    <li><a href="#">Embroidery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </nav>
</header>
<section class="thimble">
  <div class="background-image"></div>
  <div class="thimble-content-area">
    <h1>Rachel Doyles Studio</h1>
  </div>
</section>

answered Oct 17, 2019 at 12:09

Piyush Teraiya

7454 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DanieleAlessandra · Accepted Answer · 2019-07-09 22:00:03Z

1

You are missing a dot before background-image class name:

.thimble .background-image {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}

answered Jul 9, 2019 at 22:00

DanieleAlessandra

1,5251 gold badge13 silver badges21 bronze badges

Comments

Joseph Cole · Accepted Answer · 2019-07-10 00:08:19Z

0

I think you need to add ../ to the path you're specifying

<div class="background-image" style="background-image: url(../assets/img/art-arts-and-crafts-bright-colours-2564890.jpg)"></div>

This should work now..

answered Jul 10, 2019 at 0:08

Joseph Cole

7507 silver badges14 bronze badges

Comments

missmatsuko · Accepted Answer · 2019-07-10 00:13:34Z

0

Based on the code given, I don't think you need a separate div for the background image, either. You don't need to position it if you put the background image on .thimble directly:

.thimble {
  background-size: cover;
}

<section class="thimble" style="background-image: url(assets/img/art-arts-and-crafts-bright-colours-2564890.jpg)">
  <div class="thimble-content-area">
    <h1>Rachel Doyles Studio</h1>
  </div>
</section>

answered Jul 10, 2019 at 0:13

missmatsuko

1681 silver badge5 bronze badges

Collectives™ on Stack Overflow

background image is not displaying

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related