Background image centered, and context menu overflow


I explain my problem. To resume, i have a background-image centered for my BODY.

I have a div that is centered too inside this body.

I use a "" context menu. When i "right-click" near a border of my window, context menu is displayed outide the window, so window is resized and backgound image is recentered depending of the new global window size (even if lift cursor appear). BUT div inside is not resized depending of the size of the document. It stay centered depending on the content of what is displayed.

How to resize my div the way the backgound do, or how to keep background image centered to what is displayed and not global window size.
Who is Participating?
arantiusConnect With a Mentor Commented:
Online demo:

      <base href="" />
      <title>Javascript Context Menu Ex.#8 - dhtml popup menu mode</title>

      <!-- Apycom DHTML Menu -->
      <noscript><a href=>DHTML Menu, (c)2004 Apycom</a></noscript>
      <script type="text/javascript" language="JavaScript1.2" src="apymenu.js"></script>
      <script type="text/javascript" language="JavaScript1.2" src="data-popup.js"></script>
      <script type="text/javascript" language="JavaScript1.2" src="data-popup2.js"></script>
      <!-- Apycom DHTML Menu, -->

      body {
            margin: 0;
            height: 100%;
      #holder {
            width: 100%;
            min-height: 100%;
            background-image: url(img/bg.gif);
            background-repeat: repeat-y;
            background-position: center;
            text-align: center;
      * html #holder {
            height: 100%;

<body bgcolor=#FFFFFF onContextMenu="return apy_popup(1, 1000, event);">
<div id="holder">
      <div style="width: 784px;margin: 0 auto;width: 784px;text-align: center;">
            Display this window in order to see gray backgound left and right<br><br>
            Put you mouse near the right of the window. Right CLICK. A context menu should appear.
            But it appear out of the window. BUT !!! Background that is centered reajust , but not
            the DIV that contain what your are reading. How to dynamically center this div even if it is
            clicked near the border of the screen ? What javascript to raise ?

It's a better solution to modify your right click menu so that it would show at the left side of the mouse cursor when you're at the right edge of the window.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.