How to display a background image in css and html

Question

I am trying to display a background image in a <section> in my html using css. I am hosting locally using XAMPP and the URL is coming from my Imgur account. When I run my code, the background image does not appear. Any ideas why the image won't show?

.bigslide {
  background-image: url("https://imgur.com/haukzXN");
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  width: 700px;
}

  <nav class="nav">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#page1">Services</a></li>
      <li><a href="#page2">About Us</a></li>
      <li><a href="#page3">Contact</a></li>
      <li><a href="#social">Social</a></li>
    </ul>
  </nav>
</header>

<body>
  <div id="start">
    <h1>DT Professional Carpet Cleaning and Hanyman Service.</h1>
    <section class="bigslide">
    </section>
  </div>

you need to give the bigslide some height.

Daniel A. White
– Daniel A. White

2018-04-23 00:02:23 +00:00
Commented Apr 23, 2018 at 0:02 — Daniel A. White
– Daniel A. White, Commented Apr 23, 2018 at 0:02
Adding a height and width didnt fix your problem?

Smokey Dawson
– Smokey Dawson

2018-04-23 00:05:43 +00:00
Commented Apr 23, 2018 at 0:05 — Smokey Dawson
– Smokey Dawson, Commented Apr 23, 2018 at 0:05

Temani Afif · Accepted Answer · 2018-04-23 00:14:48Z

6

You are using the wrong link from the https://imgur.com site. The link you used it not the link of the image but the link to view the image online.

Use this one instead;

.bigslide {
  background-image: url("https://i.imgur.com/haukzXN.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  width: 700px;
}

<section class="bigslide">
</section>

edited Apr 23, 2018 at 0:14

answered Apr 23, 2018 at 0:07

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

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

Comments

Jake Reece · Accepted Answer · 2018-04-23 00:07:35Z

3

Your link is to the imgur web page; this is the link to your image:

https://i.sstatic.net/RKc3s.jpg

So just change your CSS class like this:

.bigslide {
  background-image: url("https://imgur.com/haukzXN.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  width: 700px;
}

answered Apr 23, 2018 at 0:07

Jake Reece

1,1781 gold badge14 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to display a background image in css and html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related