Hey everyone,

I am currently trying to adjust my landing page to be a little bit easier on the eyes. I am using the Seattle theme with a background image, a single container text layout and I would like to adjust it a little bit but I am having difficulty. To be more specific, when you use the Oslo theme you can see that the containers allow for the site background image to shine around the container itself, similar to a regular website. In Seattle's theme, the container expands the entire width of the page regardless of whether or not the area is filled with material.

How do I make the Seattle theme allow for me to have the background image not be fully obstructed by the whitish container overlay so that the page appears to be more like a website ?

OR

How do I add the Global navigation pane (Top Link Bar) to the Oslo theme ?

Edit- I should add that my first attempt was to use CSS to adjust the width of the S4-bodycontainer and it has not worked -- nor do I even know if that was the proper approach.

• Edited by PatrickRM Tuesday, April 21, 2015 4:55 PM Added info

Hi Patrick,

From your description, my understanding is that you want to customize your master page, and want to know how to use CSS to customize Seattle theme.

Please try to customize your Seattle theme with these steps below:

1. Enter your SharePoint home page, and get your selector as the screenshot below.
2. Enter your Seattle theme, find the source with keywords [id="PlaceHolderMain"].
3. Add code below(please backup your Seattle theme file before customizing it) to your Seattle theme below the line that you find in step2.
4. Save the Seattle theme, and refresh your SharePoint Site.

Add this code below to your Seattle theme:

<style type="text/css">
	#aspnetForm{
		background-image:url('../../Shared%20Documents/1.jpg')
	}
</style>

Please refer the screenshot below to get your selector, and it shows my result:

Best Regards,

Vincent Han

Hi Vincent,

Thank you for your reply. Unfortunately this did not help me though. The problem that I am having is that the background image that I set as a default is overlayed by a white, cloudy object and is obstructing my view of the background image. When I use the Oslo theme, the overlay does not exist. Instead, the actual boxes with webparts or text are displayed in their boxes, but the background image is clearly visible outside of the boxes. In Seattle though, the background image is covered by the box for the entire page.

Hi,

What you are seeing is the expected outcome. This is because #s4-workspace has a class added to it, .ms-core-overlay in seattle master.

Many ways around this. You could update the seatte master by removing this class. Or you could update the included style recommend above to the following:

<style type="text/css">
    #aspnetForm{
        background-image:url('../Shared%20Documents/1.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
    #s4-workspace.ms-core-overlay {
        background-color: transparent;
    }
</style>