html - background color surround image -


i want logo of page on top left corner surrounded black background. however, background color not cover area on right of image. using html , css.

this 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="http://i.stack.imgur.com/we2r4.png" align="left" />      </a>    </div>  </body>    </html>

remove align="left" attribute. acts similar if made image float: left, never clear float after parent collapses , 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="http://i.stack.imgur.com/we2r4.png" />      </a>    </div>  </body>    </html>

if want make logo left-aligned should use text-align: left of #title, work because img inline-block default.


Comments

Popular posts from this blog

android - Gradle sync Error:Configuration with name 'default' not found -

java - Andrioid studio start fail: Fatal error initializing 'null' -

html - jQuery UI Sortable - Remove placeholder after item is dropped -