1

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>
A. Abramov
  • 1,823
  • 17
  • 45
Nathan Gable
  • 21
  • 2
  • Well first step of having an image as a background is setting it as [`background: url('...')`](https://developer.mozilla.org/en-US/docs/Web/CSS/background), not using an `img` element. Also, guessing from the name, a 32x32 icon will look bad on any of today's screens. Except if you want a repeating image, in which way you're looking for a bit different solution than cover image. – Marko Gresak Aug 14 '15 at 21:57

1 Answers1

1

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.

A. Abramov
  • 1,823
  • 17
  • 45
  • Might want to mention that `background-size:cover;` is an [IE9+ feature](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility). – Marko Gresak Aug 14 '15 at 21:53