0

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>

2
  • 1
    you need to give the bigslide some height. Commented Apr 23, 2018 at 0:02
  • Adding a height and width didnt fix your problem? Commented Apr 23, 2018 at 0:05

2 Answers 2

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>

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

Comments

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;
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.