SharePoint Styling

Excuse the absence blog lovers, I have been busy setting up my own consultancy, working through my masters and preparing for another more tougher obstacle mud run, and enjoying the warmer weather.


Recently I have been trying to get a background image to display on a content area wiki page in SharePoint 2010, so without making changes to the master page I used a Content Editor Web Part, and pointed it to a text file in my Site Assets.


Using F12 I managed to find the exact element to style: .ms-rte-layoutszone-inner being the new plaything produced some of this magic:

.ms-rte-layoutszone-inner {
BACKGROUND-IMAGE: url(http://yoursite/SiteAssets/Images/background.jpg);

But the image didn’t scale well. Adding this displayed the whole image on the required area only on Chrome and Firefox:

background-size: 100% 100%;

The above CSS doesn’t work for me in Any Internet Explorer, even though research points to its support for browsers after 9, and mine is IE11.  (Blast you Microsoft!)


I did find a workaround though, adding some of this to the potion:


background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=’http://yoursite/SiteAssets/Images/background.jpg’,
This uses a filter to scale the image to fit in the required area, and gets IE to behave like the other browsers.

That’s all, over and out.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s