Background Image for entire Zone?

Question

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!

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

Answer 2

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

Answer 3

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.