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’,
sizingMethod=’scale’);
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.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s