CSS Background-Image not displaying?

Question

I've all of a sudden got a problem trying to display a background-image in CSS.

The image is invisible!

I'm trying to use this background image specifically for a certain location on the page, before scrolling down further to another image or background.

Can anyone shed some light on this situation and possibly provide the correct code/explain why I was wrong?

Thanks in advance!

HTML:

    <!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="main">
      <div class="container">
        <h1>Move</h1>
        <p> Form healthy habits to take your fitness to the next level. </p>
        <a href="www.google.co.uk"> Start Now </a>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <div class="col">
          <h2>Move</h2>
          <p>Become more active by tracking your runs, rides, and walks.</p>
        </div>


        <div class="clearfix"></div>
      </div>
    </div>


    <div class="feature">
      <div class="container">

      </div>
    </div>


  </body>
</html>

CSS:

html, body {
  margin: 0;
}

h1, h2, a {
  font-family: 'Oswald', sans-serif;
}

p {
  font-family: Helvetica, Arial, sans-serif; 
}

.container {
  width: 940px;
  margin: 0 auto;
}

/* Main */
.main {
  background-image: url ("https://yt3.ggpht.com/-QkqvzArFkYs/AAAAAAAAAAI/AAAAAAAAAAA/qw97foQDUbQ/s900-c-k-no/photo.jpg");
  height: 600px;
}

.main h1 {
  font-size: 150px;
  color: white;
  text-align: center;
}

.main p {
  font-size: 18px;
}


/* Supporting */
.supporting {
  text-align: center;
  padding: 50px 0 80px;
}

.supporting .col {
  float: left;
  width: 28%;
  padding: 10px;
}

.supporting h1,
.supporting h2 {
  color: #ffa800;
  font-size: 20px;
  margin-bottom: 10px;
}

.clearfix {
  clear: both;
}

.supporting p {
  color: #efefef;
  margin-bottom: 20px;
  line-height: 20px;
  font-size: 12px;
}

.supporting .btn {
  background-color: #eee;
  color: #1c1c1c;
  font-size: 18px;
  padding: 8px 30px;
  text-decoration: none;
  display: inline-block;
}

/* Feature */
.feature {
  height: 600px;
}

.feature h1,
.feature h2 {
  color: #fff;
  font-size: 40px;
  margin: 0;
  padding:50px 0 0;
}

/* Footer */
.footer {
  height: 600px;
}

.footer h1,
.footer h2 {
  color: #fff;
  font-size: 40px;
  margin: 0 0 20px 0;
  padding:50px 0 0;
}

.footer p {
  color: #fff;
  margin: 0 0 20px 0;
  font-size: 18px;
}


@media (min-width:600px) {
  .main h1 {
    font-size: 200px;
  }

  .supporting .col {
    width: 30%;
  }

  .supporting h2 {
    font-size: 40px;
  }

  .supporting p {
    font-size: 14px;
  }

  .feature h2 {
    font-size: 60px;
  }
}

max · Accepted Answer · 2015-10-27 22:02:15Z

3

Remove space between url and ( in your CSS.

answered Oct 27, 2015 at 22:02

max

8,6973 gold badges25 silver badges56 bronze badges

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

Comments

nikunjM · Accepted Answer · 2015-10-27 22:00:03Z

0

Copy paste URL in Browser if u can see it then may be add Id to div and hard code inside div, try to modify image size and style using view element in any one of the popular browsers.

Then create css for id and try it again .. Even I m new to Css but it always works ..

Or replace HTTP instead of HTTP.. if u dont have certificate then may be it will not show up ..

answered Oct 27, 2015 at 22:00

nikunjM

5901 gold badge8 silver badges22 bronze badges

Comments

chris_blues · Accepted Answer · 2015-10-27 22:04:01Z

0

Maybe just remove the space in the CSS?

background-image: url("https://yt3.ggpht.com/-QkqvzArFkYs/AAAAAAAAAAI/AAAAAAAAAAA/qw97foQDUbQ/s900-c-k-no/photo.jpg");

answered Oct 27, 2015 at 22:04

chris_blues

1299 bronze badges

Collectives™ on Stack Overflow

CSS Background-Image not displaying?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related