Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Really silly question but... gallery background fully covered by image

Edrol97

Edrol97

Bronze Coder
So I've got my current galleries covered by this css which covers the whole of the slide-show_containers div which holds all of my galleries. I want to change it for one gallery I had

Code: 
.slide-show_containers {
  position: fixed;
  z-index: 4000000000000000;
  display: none;
  top: 0;
  left: 0;
  background-image: url(img/background/Grimace%20gallery%20background.png);
  background-size: cover;
  object-fit: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

I've created a separate div styling with the precise same css besides the background image

Code: 
.slide-show_17container {
  position: fixed;
  z-index: 4000000000000000;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  background-image: url(img/background/TrumpTerrorBackground.png);
  background-size: cover;
  object-fit: cover;
  background-repeat: repeat-y;
  width: 100%;
  height: 100%;
}

It overlaps currently with the original background- see image. Any help is as always much appreciated.
 

Attachments

  • Screenshot 2024-11-08 at 21.19.16.png
    Screenshot 2024-11-08 at 21.19.16.png
    1.4 MB · Views: 8
Last edited:
Sort by date Sort by votes
I'm not exactly sure what you mean, but maybe try increasing or decreasing the z-index depending on if you want the image in front or behind. Also note that anything behind will be visible through any transparent areas in the image.
 
Upvote 0 Downvote
Johna said:
I'm not exactly sure what you mean, but maybe try increasing or decreasing the z-index depending on if you want the image in front or behind. Also note that anything behind will be visible through any transparent areas in the image.
Click to expand...
The grimace faces on the bottom shouldn't be there and the background should be covered entirely by the altered version of the American flag.
 
Last edited:
Upvote 0 Downvote
Johna said:
Can you show the HTML for this gallery?
Click to expand...
So I've managed to solve the initial problem by adding a background colour of white to the parent div, but I have another issue with the gallery. I will upload my full code, but it's quite a few lines. I'm wondering if it's something to do with the css. Basically what seems to happen with this code is at times it seems to add another close button beneath. I'm not sure how to rectify this.
HTML: 
<div class="slide-show_10container">
                    <div class="next_button" onclick="NextImage()">
                      <img src="img/background/right-arrow.png" />
                    </div>
                    <div class="previous_button" onclick="PreviousImage()">
                      <img src="img/background/left-arrow.png" />
                    </div>
                    <div class="close_button" onclick="CloseLightbox(10)">
                      <img src="img/background/close-button.png" />
                    </div>
                      <div class="image_slide10 responsive">
                        <img src="img/New%20Contemporaries/Gallery%20View.png"
                        width="600px"/>
                        <div class="title_text">Into the Gallery Photo copyright: Andy Stagg.</div>
                        </div>
                    <div class="image_slide10 responsive">
                      <img
                        src="img/New%20Contemporaries/Boris%20Can't%20Get%20Clean%20web.png"
                        width="600px"
                      />
                      <div class="caption_text">
                        <span style="background-color: white"
                          >A piece I made for I don't know what reason, and yet it's still valid today. Alexander Boris de Pfeffel Johnson everybody! Photography Copyright: Andy Stagg</span
                        >
                      </div>
                    </div>
                  </div>
                  <div class="slide-show_11container">
                    <div class="next_button" onclick="NextImage()">
                      <img src="img/background/right-arrow.png" />
                    </div>
                    <div class="previous_button" onclick="PreviousImage()">
                      <img src="img/background/left-arrow.png" />
                    </div>
                    <div class="close_button" onclick="CloseLightbox(11)">
                      <img src="img/background/close-button.png" />
                    </div>
   
                    <div class="image_slide11 responsive">
                      <img
                        src="img/Covid%20Crimes/4TiersFor%20Boris.png"
                        width="300px"
                      />
                      <div class="title_text">
                        <span style="background-color: white"
                          >Four Tiers for Boris</span
                        >
                      </div>
                      <div class="caption_text">
                        <span style="background-color: white"
                          >The chronic Conservative mismanagement of the Covid
                          pandemic is plain for all to see!</span
                        >
                      </div>
                    </div>
   
                    <div class="image_slide11 responsive">
                      <img
                        src="img/Covid%20Crimes/CountdowntoCorruption.png"
                        width="600px"
                      />
                      <div class="caption_text">
                        <span style="background-color: white"
                          >We all knew this government was corrupt but we never
                          thought it was this bad</span
                        >
                      </div>
                    </div>
   
                    <div class="image_slide11 responsive">
                      <img
                        src="img/Covid%20Crimes/CummingsandGoingssmall.png"
                        width="600px"
                      />
                      <div class="caption_text">
                        <span style="background-color: white"
                          >Maybe Dominic Cummings can test his eyes on this
                          artwork</span
                        >
                      </div>
                    </div>
   
                    <div class="image_slide11 responsive">
                      <img
                        src="img/Covid%20Crimes/Looney,JustSimplyLooney.jpg"
                        width="600px"
                      />
                      <div class="title_text">
                        <span style="background-color: white"
                          >Looney, Just Simply Looney</span
                        >
                      </div>
                      <div class="caption_text">
                        <span style="background-color: white"
                          >With the death toll from Covid being as huge as it was,
                          that really sadly is all folks</span
                        >
                      </div>
                    </div>
   
                    <div class="image_slide11 responsive">
                      <img
                        src="img/Covid%20Crimes/WeMeetAgainMrLockdown.jpg"
                        width="600px"
                      />
                      <div class="title_text">
                        <span style="background-color: white"
                          >We Meet Again Mr Lockdown</span
                        >
                      </div>
                      <div class="caption_text">
                        <span style="background-color: white"
                          >They didn't ever get this right!</span
                        >
                      </div>
                    </div>
   
                    <div class="image_slide11 responsive">
                      <img
                        src="img/Covid%20Crimes/We'veHeardItAllBefore.jpg"
                        width="400px"
                      />
                      <div class="title_text">
                        <span style="background-color: white"
                          >We've Heart It All Before</span
                        >
                      </div>
                      <div class="caption_text">
                        <span style="background-color: white"
                          >It was very repetitive in the Covid lockdown</span
                        >
                      </div>
                    </div>
   
                    <div class="image_slide11 responsive">
                      <img
                        src="img/Covid%20Crimes/SoWhyAreYouGivingThisConference.png"
                        width="600px"
                      />
                      <div class="title_text">
                        <span style="background-color: white"
                          >It's not Rocket Science</span
                        >
                      </div>
                      <div class="caption_text">
                        <span style="background-color: white"
                          >During Covid, Johnson didn't half ramble on about
                          nothing. Just let Chris Whitty speak man!</span
                        >
                      </div>
                    </div>
   
                    <div class="image_slide11 responsive">
                      <img
                        src="img/Covid%20Crimes/BirthdayBlues.png"
                        width="600px"
                      />
                      <div class="title_text">
                        <span style="background-color: white"
                          >Happy Birthday to Sars-CoV-2?</span
                        >
                      </div>
                      <div class="caption_text">
                        <span style="background-color: white"
                          >Not a happy anniversary</span
                        >
                      </div>
                    </div>
   
                    <div class="image_slide11 responsive">
                      <img
                        src="img/Covid Crimes/CanTalkTalkbutCan'tWalkWalk.png"
                        width="600px"
                      />
                      <div class="title_text">
                        <span style="background-color: white">Not Dido Hardup</span>
                      </div>
                    </div>
                  </div>
                  <div class="slide-show_12container">
                    <div class="next_button" onclick="NextImage()">
                      <img src="img/background/right-arrow.png" />
                    </div>
                    <div class="previous_button" onclick="PreviousImage()">
                      <img src="img/background/left-arrow.png" />
                    </div>
                    <div class="close_button" onclick="CloseLightbox(10)">
                      <img src="img/background/close-button.png" />
                    </div>
   
                    <div class="image_slide12 responsive">
                      <img src="img/Tory%20Travails/Smoked.png" width="400px" />
                      <div class="title_text">
                        <span style="background-color: white">Smoked</span>
                      </div>
                      <div class="caption_text">
                        <span style="background-color: white"
                          >As Sunak raises the smoking age as part of a big
                          announcement, the only thing going up in smoke is his time
                          as prime minister</span
                        >
                      </div>
                    </div>
   
                    <div class="image_slide12 responsive">
                      <img
                        src="img/Tory%20Travails/ToryWipeOut.png"
                        width="400px"
                      />
                      <div class="title_text">
                        <span style="background-color: white">Tory Wipeout</span>
                      </div>
                      <div class="caption_text">
                        <span style="background-color: white"
                          >As Sunak's progress in the red wall is eliminated in the
                          Council elections, it looks like it's gonna be a Tory
                          Wipeout come the General Election</span
                        >
                      </div>
                    </div>
   
                    <div class="image_slide12 responsive">
                      <img src="img/Mayday%20Maynay!.png" width="600px" />
                      <div class="title_text">
                        <span style="background-color: white">Mayday Maynay!</span>
                      </div>
                      <div class="caption_text">
                        <span style="background-color: white"
                          >SOS It's over Rishi!</span
                        >
                      </div>
                    </div>
   
                    <div class="image_slide12 responsive">
                      <img
                        src="img/Tory%20Travails/Electoral%20Dysfunction.png"
                        width="500px"
                      />
                      <div class="title_text">
                        <span style="background-color: white"
                          >Electoral Dysfunction</span
                        >
                      </div>
                      <div class="caption_text">
                        <span style="background-color: white"
                          >Polling Station signs are still up. Is there something
                          the Government aren't telling us?</span
                        >
                      </div>
                    </div>
   
                    <div class="image_slide12 responsive">
                      <img
                        src="img/Tory%20Travails/Policy%20Deranged.png"
                        width="500px"
                      />
                      <div class="title_text">
                        <span style="background-color: white">Policy Deranged</span>
                      </div>
                      <div class="caption_text">
                        <span style="background-color: white">
                         Sunak announced his manifesto today, without calling an
                          election. Ready, Set, No.</span>
                      </div>
                    </div>
                    <div class="image_slide12 responsive">
                      <img src="img/Tory%20Travails/Elective%20Suicide.png"
                      width="500px"/>
                      <div class="title_text"><span style="background-color: white">Turkeys or Chickens</span></div>
                      <div class="caption_text"><span style="background-color: white">Sunak calls an election and all the Tories scarper. Are they chicken?</span></div>
                    </div>
                    <div class="image_slide12 responsive">
                    <img src="img/Tory Travails/Dud'sArmy.gif"
                    width="500px"/>
                    <div class="title_text"><span style="background-color: white">Dud's Army</span></div>
                    <div class="caption_text"><span style="background-color: white">Who do you think you are kidding Mr Sunak if you think our kids will gun?</span></div>
                    </div>
                    <div class="image_slide12 responsive">
                      <img src="img/Silverstone Sorrow.png" width="500px"/>
                      <div class="title_text"><span style="background-color: white">Silverstone Sorrow</span></div>
                      <div class="caption_text"><span style="background-color: white">Rishi Sunak is not turning a corner but facing a car crash as he launched his manifesto today at Silverstone. He's waving the white flag...</span></div>
                    </div>
                    <div class="image_slide12 responsive">
                      <img src="img/Tory%20Travails/Sheep.png" width="400px" alt="A cartoon showing sheep walking away from Rishi Sunak who is saying It's feeding time. The text above reads Even sheep will not follow Rishi Sunak and below reads Fed Up."/>
                      <div class="title_text"><span style="background-color: white">Sheep not sheeping</span></div>
                      <div class="caption_text"><span style="background: white;">Sunak went to a sheep farm in another metaphor of failure on this campaign</span></div>
                      </div>
                    <div class="image_slide12 responsive">
                      <img src="img/Tory Travails/BadLooks.png" width="55%" alt="alt= A caricature of a man in a suit, resembling Rishi Sunak, is shown next to the altered 'L badLooks' logo against a red background. The original logo, manipulated from the Ladbrokes branding, cleverly hints at his aide's potentially illegal bet with a betting company."/>
                      <div class="title_text"><span style="background-color: white">BadLooks</span></div>
                      <div class="caption_text"><span style="background-color: white;">Sunak doesn't half know how to look bad during his own election campaign, as a close aide of his is found to have placed a bet on when an election would be. I'm not betting on either of their futures.</span></div>
                      </div>
                    <div class="image_slide12 responsive">
                      <img src="img/Tory%20Travails/A%20Real%20Gamble.png" width="50%" alt="Slot machine with a row of Xes on it. The Slot Machine is donned in Tory branding and is titled Tory Travails."/>
                      <div class="title_text"><span style="background-color: white">Tory Travails</span></div>
                      <div class="caption_text"><span style="background-color: white;">As more and more Conservative apparatchiks are found to have broken electoral rules on betting, is a vote for the Tories gambling on our future?</span></div>
                      </div>
                  </div>
                  <div class="slide-show_13container">
                    <div class="next_button" onclick="NextImage()">
                      <img src="img/background/right-arrow.png" />
                    </div>
                    <div class="previous_button" onclick="PreviousImage()">
                      <img src="img/background/left-arrow.png" />
                    </div>
                    <div class="close_button" onclick="CloseLightbox(13)">
                      <img src="img/background/close-button.png" />
                    </div>
                    <div class="image_slide13 responsive">
                      <img src="img/Iffy.png" width="60%"/>
                      <div class="title_text"><span style="background-color: white">Iffy</span></div>
                      <div class="caption_text"><span style="background-color: white">Both Labour and Conservatives have been branded by the IFS as iffy</span></div>
                    </div>
                    <div class="image_slide13 responsive">
                      <img src="img/Labour%20Pains.png" width="30%"/>
                      <div class="title_text">Labour Pains</div>
                      <div class="caption_text"><span style="background-color: white">Is Keir Starmer destroying the Labour heart with Tory tactics and does it matter?</span></div>
                      </div>
                      <div class="image_slide13 responsive">
                      <img src="img/Get%20In%20The%20Car.png" width="600px" alt="Rishi Sunak standing in a funeral car park with an umbrella turned inside out in his hands saying I will not surrender. The Hearse driver behind him is saying it's already over mate, get in the car">
                      <div class="title_text"><span style="background-color: white;">Get In the Car</span></div>
                      <div class="caption_text"><span style="background-color: white;">It's over Rishi.</span></div>
                      </div>
                      <div class="image_slide13 responsive">
                        <img src="img/UK Government crest.png" width="40%" alt="An alternative government crest">
                        <div class="title_text">What fresh hell is this?</div>
                        </div>
                      <div class="image_slide13 responsive">
                        <img src="img/Tory%20Travails/Canthisreallywork.png" width="40%" alt="Boris Johnson at a podium advertising the Conservatives at the 2024 General Election with Rishi Sunak in the background pondering Can this really work?">
                        <div class="title_text">Can this really work?</div>
                        <div class="caption_text"><span style="background-color: white">Alexander Boris de Pfeffel Johnson of lockdown party fame was on the campaign trail as the Tories pulled out their last resort.</span></div>
   
                        </div>

                      <div class="image_slide13 responsive">
                        <img src="img/The%20Chasm%20Budget.png" width="50%" alt="An inky drawing of Rachel Reeves' budget box teetering between two cliffs">
                        <div class="title_text">The Chasm Budget</div>
                        <div class="caption_text"><span style="background-color: white;">Rachel Reeves delivers her first budget to much speculation</span></div>
                      </div>
   
   
                      </div>
   
                     
                    <div class="slide-show_14container">
                      <div class="next_button" onclick="NextImage(14)">
                      <img src="img/background/right-arrow.png" />
                    </div>
                    <div class="previous_button" onclick="PreviousImage(14)">
                      <img src="img/background/left-arrow.png" />
                    </div>
                    <div class="close_button" onclick="CloseLightbox(14)">
                      <img src="img/background/close-button.png" />
                    </div>
                      <div class="image_slide14 responsive">
                        <img src="img/EverydayBlues/IMG_4770.jpeg" width="40%" alt="the cover of a calendar reading EveryDay Blues in a dark blue serif font.">
                        <div class="title_text"><span style="background-color: white;"><a href="https://lbbonline.com/news/everyday-blues-2023-calendar-holds-uk-government-to-account" target="_blank">EveryDay Blues Calendar</a></span></div>
                        <div class="caption_text"><span style="background-color: white;">Each year Oriel Wells runs a calendar with KesselsKramer and at the end of 2022, I was asked. </span></div>
   
                        </div>
                      <div class="image_slide14 responsive">
                        <img src="img/EverydayBlues/CoverPageEDBlues.png" width="60%" alt="an explanation of the EveryDay Blues project by Oriel Wells and KesselsKramer">
                       
                        </div>
                      <div class="image_slide14 responsive">
                        <img src="img/EverydayBlues/EverydayBluesEliotLordpage.png" width="50%" alt="an illustrated uk political illustration of the month of August and the two potential leaders of the Conservative Party fighting for the leadership off the back of Boris Johnson's time in office.">
                        <div class="title_text"><span style="background-color: white;">August Disgust</span></div>
                        <div class="caption_text"><span style="background-color: white;">I am the month of August 2023</span></div>
                       
                        </div>
                      <div class="image_slide14 responsive">
                        <img src="img/EverydayBlues/Everyday Blues- Eliot Lord.png" width="50%" alt="a zooming in of an image of a calendar image.">
                        <div class="title_text"><span style="background-color: white;">Here's a closer look</span></div>
                        </div>
   
                      </div>
   
   
                      <div class="slide-show_15container">
                        <div class="next_button" onclick="NextImage(15)">
                      <img src="img/background/right-arrow.png" />
                    </div>
                    <div class="previous_button" onclick="PreviousImage(15)">
                      <img src="img/background/left-arrow.png" />
                    </div>
                    <div class="close_button" onclick="CloseLightbox(15)">
                      <img src="img/background/close-button.png" />
                    </div>
                  <div class="image_slide15 responsive">
                    <img src="img/It's%20a%20bit%20tight.png" width="40%" alt="a map of the UK drawn in red and yellow with a belt around it, saying It's a bit tight"></div>
                  <div class="image_slide15 responsive">
                    <img src="img/NotTheGreenBelt.png" width="40%" alt="a cartoon of Keir Starmer tightening his belt saying we must tighten the belt but not the green belt"></div>
                  <div class="image_slide15 responsive">
                    <img src="img/FileNotFound.png" width="80%" alt="A computer error screen showing Microsoft's global outage error and comparing it to Labour's child policy deficit"></div>
                  <div class="image_slide15 responsive">
                    <img src="img/Sleepy%20can%20sleep.png" width="30%" alt="A cartoon of Joe Biden standing at a podium saying I'm standing down. Now let me have a lie down. The caption reads Sleepy Joe Now can sleep">
                    <div class="title_text">Sleepy Joe Now Can Sleep</div>
                    </div>
                  <div class="image_slide15 responsive">
                    <img src="img/Bibby%20Stockholm%20Syndrome.png" width="50%" alt="a cartoon of the Bibby Stockholm sinking with Tories sailing away in a ship called the ship of Lost Votes.">
                    <div class="title_text">Bibby Stockholm Syndrome</div>
                    </div>
                  <div class="image_slide15 responsive">
                    <img src="img/Rings of Shame.png" width="50%" alt="The Olympic rings as handcuffs with the Israeli Star of David in the centre of each">
                    <div class="title_text">Rings of Shame</div>
                    </div>
                  <div class="image_slide15 responsive">
                    <img src="img/Come%20In%20Peace.png" width="50%" alt="Alien landing on a hillside looking at a far-right rally in the foreground saying, We come In Peace, Oh Wait, Hold on">
                    <div class="title_text">Two Alien Life Forms</div>
                    </div>
                  <div class="image_slide15 responsive">
                    <img src="img/TrumpTwats.png" width="50%" alt="an image of altered logos of some of the companies that have donated to the Trump campaign in the past or that continue to do so">
                    <div class="title_text">Trumped up Businesses</div>
                  </div>
                  <div class="image_slide15 responsive">
                    <img src="img/C'eci%20n'est%20pas%20un%20lapin.png" width="30%" alt="A drawing of Rachel Reeves as a magician pulling nothing out of a hat saying And for my next trick I won't crash the markets. Caption: C'eci n'est pas un lapin">
                    <div class="title_text">C'eci n'est pas un lapin</div>
                  </div>
                  <div class="image_slide15 responsive">
                    <img src="img/Spooked.png" width="50%" alt="A drawing of ghosts coming out of the budget box saying the perceived problems by the press with Rachel Reeves' budget of 2024">
                    <div class="title_text">SPOOKED</div>
                  </div>
                    </div>
                  <div class="slide-show_16container">
                    <div class="next_button" onclick="NextImage(16)">
                      <img src="img/background/right-arrow.png" />
                    </div>
                    <div class="previous_button" onclick="PreviousImage(16)">
                      <img src="img/background/left-arrow.png" />
                    </div>
                    <div class="close_button" onclick="CloseLightbox(16)">
                      <img src="img/background/close-button.png" />
                    </div>
                    <div class="image_slide16 responsive">
                      <img src="img/HerneBay24/HerneBayWall.png" width="50%">
                      </div>
                    <div class="image_slide16 responsive">
                      <img src="img/HerneBay24/Not%20Far%20Right.jpg" width="50%">
                      </div>
                    <div class="image_slide16 responsive">
                      <img src="img/HerneBay24/DinkandI.jpg" max-width="50%">
                      </div>
                    <div class="image_slide16 responsive">
                      <img src="img/HerneBay24/FileNotFound.jpg" width="50%">
                      </div>
                    <div class="image_slide16 responsive">
                      <img src="img/HerneBay24/CartoonistsUnite.png" width="50%">
                      </div>
                    </div>
                 
                   
                    </div>
                       
                       
                       
                  </div>
       
        </div>
       
       
        <script src="https://www.paypal.com/sdk/js?client-id=BAA-UxEfItp5Ddqx1XHFjUxi6W6JbsgSTZmv2pD5pXP065KG3rgcUZqbyHuUfS6WNNVhJvs7vEMhYgVD6g&components=hosted-buttons&disable-funding=venmo&currency=GBP"></script>
            <div id="paypal-container-QTAUM5KYEGC8G"></div>
            <script>
              paypal
                .HostedButtons({
                  hostedButtonId: "QTAUM5KYEGC8G",
                })
                .render("#paypal-container-QTAUM5KYEGC8G");
            </script>
   <footer style="background-color: #ec1801;">
     
        <div class="socials">
        <a href="https://www.facebook.com/house.of.lord.illustration1/" target="_blank"><img src="img/background/Facebook Logo.png" class="fa fa-facebook"></a>
        <a href="https://twitter.com/eliotlord1" target="_blank"><img src="img/background/Twitter%20Logo.png" class="fa fa-twitter"></a>
        <a href="https://www.instagram.com/house_of_lord_illustration/?hl=en" target="blank"><img src="img/background/Instagram logo.png" class="fa fa-instagram"></a>
      </div>
       <a href="Hi.html"><div class="title_text1" style="color: white;">All site content &#169 Eliot Lord 2024</div></a>
       <br>
     
       <a href="Hi.html"><p style="color: white;">Hi</p></a>
       <a style="padding-left: 5px;" href="about_me.html"><p style="color: white;">Bio</p></a>
       <a style="padding-left: 5px;" class="activelinkfooter" href="Art.html"><p style="color: white;">Show-Off</p></a>
       <a style="padding-left: 5px;" href="Bad_Times.html"><p style="color: white;">Bad Times</p></a>
       <a style="padding-left: 5px;" href="The_Pun.html"><p style="color: white;">The Pun</p></a>
       <a style="padding-left: 5px;" href="https://procartoonists.org/profile/eliotlord/" target="_blank"><p style="color: white">I'm a Pro</p></a>
       <a style="padding-left: 5px;" href="Mail.html"><p style="color: white;">The Fail</p></a>
       <a style="padding-left: 5px;" href="cv.html"><p style="color: white;">CV</p></a>
       <a style="padding-left: 5px;" href="GB_Blues.html"><p style="color: white">GB Balderdash</p></a>
       <a style="padding-left: 5px;" href="Inspa.html"><p style="color: white">Inspagram</p></a>
       <a style="padding-left: 5px;" href="Games.html"><p style="color: white;">Play</p></a>
       <a style="padding-left: 5px;" href="mailto:[email protected]"><p style="color: white">Send-off</p></a>
    </footer>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
<script src="script.js"></script>  
<script src="slider.js"></script>
  </body>
</html>

CSS: 
.slide-show_containers {
  position: fixed;
  z-index: 4000000000000000;
  display: none;
  top: 0;
  left: 0;
  background-color: white;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.slide-show_10container {
  background-image: url(img/background/Recycle%20Corruption%20bg.png);
}
.slide-show_11container {
  background-image: url(img/background/Covid%20Crimes%20BG.png);
}
.slide-show_13container {
  background-image: url(img/background/PartyProblemsBG.png);
}
.slide-show_16container {
  position: fixed;
  z-index: 400000000000000000;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  background-image: url(img/background/Bucket%20&%20Spade.jpg);
  background-position-x: left;
  background-size: cover;
  object-fit: cover;
  background-repeat: repeat;
  width: 100%;
  height: 100%;
}
.slide-show_17container {
  position: fixed;
  z-index: 400000000000000000;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: #ffaa5f;
  background-size: cover;
  object-fit: cover;
  background-repeat: repeat-y;
  width: 100%;
  height: 100%;
}
.slide-show_15container {
  position: fixed;
  z-index: 400000000000000000;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  background-image: url(img/background/GagBackground.png);
  background-size: cover;
  object-fit: cover;
  background-repeat: repeat;
  width: 100%;
  height: 100%;
}
 

Attachments

  • Screenshot 2024-11-12 at 18.42.17.png
    Screenshot 2024-11-12 at 18.42.17.png
    1.7 MB · Views: 2
Upvote 0 Downvote
tomliv said:
Links are best. I see 2 issues already with the code you shared (.slide-show_10container does not also have the .slide-show_containers class and bg images won't work for us ) which makes troubleshooting difficult. There may be other styles effecting your page.
Click to expand...
Alright. It's live now at house-of-lord.co.uk/Art

It doesn't show on first click but when you peruse other galleries and then come back to a gallery, it changes.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom