I want to create the banner in sharepoint as shown below: 
Add a comment
|
5 Answers
This is quiet easy. Edit the page you want to modify. Select "Text Layout" from "Format Text" ribbon and set it to "Two columns with header" or another layout having a full width element on top.
Now select the ribbon "Insert" and insert a picture.
Now as you selected or uploaded a picture select the picture ribbon. Make sure the horizontal size is on 100% to fit the SharePoint page at all times. I used a logo with 256x256px which I wanted to stretch horizontaly but not verticaly so I disabled "Lock Aspect Ratio".
Save the page and you got your banner on top fitting all common display resolutions.
-
Thanks a lot, but I have old share point where I cant see these options. Is there any other way to find out– LakshmiCommented Jul 12, 2018 at 9:01
-
-
SharePoint 2013. Is there anyway to achive this using designer ?– LakshmiCommented Jul 12, 2018 at 10:08
-
I would not do it by Designer. Try to edit the page and set a "Content Editor Web Part" on top. In that you can insert the picture as shown above. Can you do that? Commented Jul 12, 2018 at 10:59
-
Hi I tried the above option by creating new page and then got those option, however am not able to convert the image as banner like I showed in the pic. For example in the above image, the header image is changed as banner and on top I could see the sharepoint site name.– LakshmiCommented Jul 12, 2018 at 11:47
For SharePoint 2013, you could follow the steps in this blog with SharePoint Designer:
If you want, You could try using "Content Editor" web part and insert HTML Snippets.
You could do so by add a "Content Editor" web part. Afterwards click the upper right corner of the web part and click "Edit Web Part". Now click "Edit Snippet" and insert your HTML Snippet. click apply and click ok.
-
Sorry I didn't get your point, Basically I just need to change the background of this area– LakshmiCommented Jul 15, 2018 at 17:48
-
you could try editing the css. use the same process as above. Add a "Script Editor" then paste the CSS. <style type="text/css"> #titlerow{ display:none; } .static.dynamic-children { width:200px; } </style> Commented Jul 20, 2018 at 3:30
I used Sharepoint Designer.
You have to create an html page from the master page. Add the header reference to the html master page. (basically it's the editable file linked to the master page).
<div id="s4-workspace">
<div class="banner">
<img src="https://xxxxxx.sharepoint.com/sites/xx/xxxx/image.png" alt="company banner" width="1000px" height="105px" />
</div>
<div id="s4-bodyContainer">
Look for the "s4" divs and place it between them accordingly.
Set up your CSS for the banner then link the .css file in Master Pages under Site Settings.
I look at Banners as being good for announcing things that people just can't miss. Something like this for example:
There are a couple of different ways you can add a true 'Banner' on top of SharePoint to highlight information.
1) Use the ways that other folks have talked about here which is things like using Content Editor web part, SharePoint Designer, Script editor, etc. to truly embed the banner directly into SharePoint
2) Use programming (javascript mostly) or a 3rd party platform like VisualSP to overlay a banner on top of SharePoint. That way you are not really moving around the content on the page, but just overlaying your important message on top of it so it can't be missed.
Good luck!
