NextGEN Gallery
Using nextgen gallery to put full-page background on each page. (3 posts)

  1. AJ
    Posted 2 years ago #

    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;
    @media screen and (max-width: 1024px) { /* Set this to your image size */
       #content img.ngg-singlepic {
        left: 50%;
        margin-left: -512px;   /* 50% */


  2. DoubleSixx
    Posted 2 years ago #

    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 ?

  3. AJ
    Posted 2 years ago #

    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: http://css-tricks.com/perfect-full-page-background-image/

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • NextGEN Gallery
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic