• AJ

    (@permaculturetreegeek)


    Here’s a nifty trick to put a full page self-scaling background on any page using just css, ngg and no additional plugins. Just insert a single pic from your gallery into the post and delete the extra stuff so it looks like this: [singlepic id=259]
    Then, add the following to your stylesheet: (If you are already using single nextgen pics anywhere on your site, or want to use images from the media manager you will have to modify the css.)

    #content img.ngg-singlepic {
      /* Set rules to fill background  */
      min-height: 100%;
      min-width: 1024px;
    
      /* Set up proportionate scaling */
      width: 100%;
      height: auto;
    
      /* Set up positioning */
      position: fixed;
      top: 0;
      left: 0;
      z-index:-100000;
    }
    
    @media screen and (max-width: 1024px) { /* Set this to your image size */
       #content img.ngg-singlepic {
        left: 50%;
        margin-left: -512px;   /* 50% */
      }
    }

    https://www.ads-software.com/extend/plugins/nextgen-gallery/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Uh I just copied and pasted this and put in the id of a picture and published the page. Didn’t notice any difference. I removed the code and checked and nothing.

    Could you provide a link to see what this code will do ?

    Thread Starter AJ

    (@permaculturetreegeek)

    Your theme may have a different tag for the main content section. Try removing the #content and just leave: img.ngg-singlepic.

    I can’t post a link because the site is in development.

    But here is the source for the css with a demo: https://css-tricks.com/perfect-full-page-background-image/

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Using nextgen gallery to put full-page background on each page.’ is closed to new replies.