Add a background image and a CSS to page in SharePoint 2010

Adding a background image to a page in SharePoint is easy, open the page in SharePoint Designer, and add the following style inside “PlaceHolderAdditionalPageHead” content place holder.
.ms-bodyareacell {
     BACKGROUND-IMAGE: url(‘imageurl‘);

</style>

Here’s my attempt to change the page background

And of course “background-repeat” and “background-position” can be used if required.

This style can also go to a CSS file, which can be added by adding a link inside the same placeholder.

css” href=”css url” />

which will look like this

CSS can be in Style Gallery or Site Assets or anywhere else inside SharePoint or in Layouts folder in 14 hive.

If you don’t remember this link attributes and their values then in page design mode, click anywhere on the page and you will get an option to “Attach an Style Sheet” to the page in “Style” tab of the ribbon. This way it will let you browse for the CSS and will create the same link element in  the page.

If you want to add a new CSS file in “Site Assets” folder, you get an “Asset” option in the “New” ribbon group when “Site Assets” folder is selected

Advertisements
  1. #1 by Faisal on September 6, 2012 - 6:11 am

    Hi Aleem,

    I need to Edit v4.master as I am adding few other table like structures and I am navigating to other site pages..

    Thanks,

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

%d bloggers like this: