How do I make my image cover the background html?

1.1k Views Asked by At

I want to make my image a cover background, but it doesn't work for me. Here's my code:

<b>
<div id="feedicon" style="display:none; z-index:0;position:fixed;width:32px;height:32px;top:250px;left:0px;">
    <a href="http://www.willmaster.com/index.xml" target="_blank">
        <img src="http://www.willmaster.com/images/feed-icon32x32.png" border="0" width="32" height="32" alt="RSS" title="RSS">
    </a>
</div>
</b>
1

There are 1 best solutions below

1
A. Abramov On

Try this:

h1
{
  color:White;
  }
.fullBack
{
  background-image:url('http://www.willmaster.com/images/feed-icon32x32.png');
  background-size:cover;
  width:100%;
  height:100%;
  }
<div class="fullBack">
<h1> some content here </h1>
</div>

using the background-size you can change the image size in a page to cover the entire page. This is a good tutorial to learn how to use that attribute wisely if you wish for a cover background image.

EDIT - It's important to remember that background-size is a css3 trait - so use it with caution, as it might not work well with old browsers.