SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have written my own custom CSS

how do i control image header.jpg depending on the screen resolution . It gets skewed for different resolutions ..


/* display our custom header background */ .ms-main { background: white url('Header.jpg') no-repeat left top; }

/* make the top bar and the bar behind nav transparent */ .ms-globalbreadcrumb, .ms-globalTitleArea, .ms-bannerContainer { background-image: none !important; background-color: transparent !important; }

/* increas the hiehgt of the header area */ .ms-globalTitleArea { height: 100px; }

/* hide the site title and site icon */ img, .ms-sitetitle { display: none; }

/* hide the bottom border on the top bar */ { border:0px transparent none !important; }

/* advanced search color */ .ms-globalTitleArea .ms-sblink a:link, .ms-globalTitleArea .ms-sblink a:visited, .ms-globalTitleArea a:hover { color: white; }

/* fix for firefox top bar */ { white-space:nowrap; }

high resolution pic I can see the whole picture(1280 X 800) low resolution pic I can just part of the picture ( 600 X 800) if you can help with this that would be great

share|improve this question
up vote 0 down vote accepted

If you can show me with a screen shot what you are trying to do, I can help.

share|improve this answer
Try this for starters .ms-main { background:#012BA4 url('Header.jpg') no-repeat right top; } If this changes any other colours such as the main body, set that to #ffffff. – Anonymous Sep 9 '10 at 19:55

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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