Background image won't show when in an #id selector but shows in body

Question

I'm currently recreating the Google homepage for Odin and trying to set the logo as a background image. Whenever I put the background image and URL in the body for CSS - the logo will show. But when I then copy and paste the exact lines into logo, the image doesn't show up at all!

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  height: 100%;
}
#logo {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png");
  background-size: 272px 92px;
  background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>Google</title>
</head>

<body>
  <div class="main">
    <a href="www.google.co.uk" id="logo"></a>
  </div>
</body>

</html>

Any ideas where I am going wrong?

i tried previously to add a height and width to the id but it makes no difference? — nicky heise, Feb 02 '17 at 11:48
That's because `` tags are inline elements. You can't set a height or width. They get their dimensions from their content. Add `#logo { display: block; }` and you will be able to set the height and width. — Turnip, Feb 02 '17 at 11:50
you're amazing! it just popped up! thank you so very much for helping me!!! — nicky heise, Feb 02 '17 at 11:52

score 1 · Accepted Answer · answered Feb 02 '17 at 11:53

There is no content in the anchor tag.

If you do not want to give any content inside anchor tag you should make display block and provide and height Or you can also use inline-block providing width and height

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title>Google</title>
  </head>
  <body>
      <div class="main">
          <a href="www.google.co.uk" id="logo"></a>
      </div>
  </body>
</html>



* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
}

#logo {
  background: url("imgs/google-logo.png");
  background-size: 272px 92px;
  background-repeat: no-repeat;
  display: block;
  height: 300px;
}

here we can set `height` as same as `background-size: ` `height` like setting `height:92px;` we won't get confused with next `elements` alignments(position). — arunkumar talla, Feb 02 '17 at 12:08

score 0 · Answer 2 · edited May 23 '17 at 12:34

Anchors (a tag) are inline elements by default, i.e. the size is auto generated based on its contents. Since your tag is empty there's no size and nothing renders.

You can change the display to block or inline-block (read more about the both here) and provide width and height.

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  height: 100%;
}
#logo {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png");
  background-size: 272px 92px;
  background-repeat: no-repeat;
  display: block;
  width: 272px;
  height: 92px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>Google</title>
</head>

<body>
  <div class="main">
    <a href="http://www.google.co.uk" id="logo"></a>
  </div>
</body>

</html>

Background image won't show when in an #id selector but shows in body

2 Answers2