1

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!

1

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");
}
0

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

0

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.

  • 1
    Note that id and class aren't the only CSS selectors. With the correct CSS selector (like nth-child) you can target anything you want from any other DOM element : 30 CSS Selectors everyone should know by hart – Danny '365CSI' Engelman Mar 24 '17 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? – Michael Bailey Mar 24 '17 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 – Danny '365CSI' Engelman Mar 24 '17 at 19:59
  • :) Yeah; that doesn't mean customers aren't using it. – Michael Bailey Mar 24 '17 at 20:13
  • Sorry, but IE9 has been around for 6 years.. and even IE6 supported many CSS selectors. So "not long ago" ?!? – Danny '365CSI' Engelman Mar 24 '17 at 20:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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