I'd like to have a background image for my Zone... Meaning an image to cover the entire portion of a zone on my page (e.g. Text Layout / TOP zone <= is this top portion a zone?)... I don't have access or the ability to use ShPt Designer... I've been using css to make all my changes. Can someone help me with this? Thank you!
3 Answers
Do you have any common class for your zone? example
<div class="firstzone">
<webpartpages:webpartzone
id="Webpartzone1" runat="server"
frametype="TitleBarOnly"
title="BottomRightWebPartZone10" />
</div>
CSS
.firstzone {
background-image: url("paper.gif");
}
There are couple of ways.
- If you have class assigned to web part zone, use class name to set background image.
If any web part inside zone has class set using jQuery as
$(".webpart-class").closest(".ms-webpart-zone").addClass("background-img-class")
From jQuery find a zone using the inside web part id which you can know from the page view source.
$("#webpart-id").closest(".ms-webpart-zone").addClass("background-img-class")
Syntax for css class .background-img-class { background: url('<>') }
Please let me know if you need additional input.
Thanks, Venkat Konjeti
OOB Web Part Zones aren't going to any identifiers you can use in your CSS, but you can download your page layout from the Master Page Gallery library, edit it in notepad to add the necessary class or ID tags, and then upload it back into your library. You don't HAVE to use SharePoint Designer.
-
1Note that
id
andclass
aren't the only CSS selectors. With the correct CSS selector (likenth-child
) you can target anything you want from any other DOM element : 30 CSS Selectors everyone should know by hart Mar 24, 2017 at 18:25 -
Good point. It wasn't that long ago that this wasn't an option for compatibility reasons, but I suppose everyone is using IE9 or better by now, right? Mar 24, 2017 at 18:56
-
IE9 isn't even supported by Microsoft anymore (see Jan 12 2016 notice) and CSS3 has been around for a very long time Mar 24, 2017 at 19:59
-
-
Sorry, but IE9 has been around for 6 years.. and even IE6 supported many CSS selectors. So "not long ago" ?!? Mar 24, 2017 at 20:31