background color surround image

Asked 11/7, 2015 at 7:41 Answered 11/7, 2015 at 7:46

I want the logo of my page on the top left corner surrounded by a black background. However, the background color does not cover the area on the right of the image. I am using HTML and CSS.

This is my code:

#title {
  width: 100%;
  height: 100%;
  background-color: black;
}
#title img {
  width: 50%;
  height: 50%;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />

<body>
  <div id="title">
    <a href="index.html">
      <img src="https://i.sstatic.net/WE2r4.png" align="left" />
    </a>
  </div>
</body>

</html>

Multifid answered 11/7, 2015 at 7:41 Comment(0)

Remove align="left" attribute. It acts similar as if you made image float: left, however you never clear the float after so the parent collapses and you simply can't see background:

#title {
  width: 100%;
  height: 100%;
  background-color: black;
}
#title img {
  width: 50%;
  height: 50%;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />

<body>
  <div id="title">
    <a href="index.html">
      <img src="https://i.sstatic.net/WE2r4.png" />
    </a>
  </div>
</body>

</html>

If you want to make logo left-aligned you should use text-align: left of the #title, it will work properly because img is inline-block by default.

Gotthard answered 11/7, 2015 at 7:46 Comment(0)

You have to add a display rule to your title element so that it actually gets a placement in the flow:

#title {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: black;
}
#title img {
  width: 50%;
  height: 50%;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />

<body>
  <div id="title">
    <a href="index.html">
      <img src="https://i.sstatic.net/WE2r4.png" align="left" />
    </a>
  </div>
</body>

</html>

Lili answered 11/7, 2015 at 7:46 Comment(0)

Recommended topics

Hot tags