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
Post a Comment