Geek Answers Handbook

Color background image

I want my page logo to be in the upper left corner, surrounded by a black background. However, the background color does not cover the area to the right of the image. I use 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="http://i.stack.imgur.com/WE2r4.png" align="left" /> </a> </div> </body> </html>
+5
source share
2 answers

Remove the align="left" attribute. It acts just as if you made a float: left image, however you never clear the float after the parent crashes and you just can't see the 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 you want to make the logo left-aligned, you must use text-align: left for #title , it will work correctly, because img is the default inline block.

0
source

You need to add a display rule to the header element so that it actually fits in the stream:

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

More articles:


All Articles