0

I am working in SharePoint 2010. I want to show a background image on the home page, that stretches to fill the entire content area. I have this in a Content Editor web part:

<style>
.bgimg {
  background: url(/SiteAssets/Gosport.png) no-repeat;
  background-size: 100% !important;
}
</style>

And then this in the body of the page:

<div class="bgimg">
* All of my web parts *
</div>

I have it mostly working, my image is shown behind all the other web parts. But it doesn't stretch to fill the space. I have tried several examples online that would work on a regular HTML page, but I think SharePoint is interfering with the background size.

I have also tried this, it shows the image, but doesn't stretch:

<style>
.bgimg {
  background: url(/SiteAssets/Gosport.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>
0

OK, found the issue was IE 11, not SharePoint. This works for my Content Editor Web Part:

<style>
.bgimg {
  background: url(/SiteAssets/Gosport.png) no-repeat;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
  src='/SiteAssets/Gosport.png',
  sizingMethod='scale');    
}
</style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.