Dawn Theme - Footer is missing after changing background

Store Design
, , ,
1

My site: etherealoasis.co

My theme: Dawn

I recently added an animated background to my store and noticed that my footer is no longer showing up. I’ll paste the code below that I used.

I added this code to the body of theme.liquid


      
![moon2.png|1180x1165](upload://vxMy6zm5VBZMltnb1LmFzZxAQk1.jpeg)

      
 

       

       

I added this code to the bottom of base.css

/* ------------  Animated Background ---------------- */

.background-container{
	position: fixed;
	top: 0;
	left:0;
	bottom: 0;
	right: 0;
}

.stars {
 background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
 position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
  	z-index: 0;
}

.twinkling{
	width:10000px;
	height: 100%;
	background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
	background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    
    -moz-animation:move-background 70s linear infinite;
  -ms-animation:move-background 70s linear infinite;
  -o-animation:move-background 70s linear infinite;
  -webkit-animation:move-background 70s linear infinite;
  animation:move-background 70s linear infinite;
	
}

.clouds{
	width:10000px;
	height: 100%;
	background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
	background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;

   -moz-animation:move-background 150s linear infinite;
  -ms-animation:move-background 150s linear infinite;
  -o-animation:move-background 150s linear infinite;
  -webkit-animation:move-background 150s linear infinite;
  animation:move-background 150s linear infinite;
}
.bgstaticimg{
  height: 70vh;
  width:70vh;
  position: absolute;
  z-index: 3;
  right: 20px;
}
/* ----------------End Animated Background------------------- */

Any help would be appreciated!

2

Could you share your store URL?

3

etherealoasis.co

4

It appears the footer is still there, just invisible. If I highlight and drag it, it will show up. I also noticed the text above the email subscription button, and all the text on the account page is all missing or transparent as well. So, I’m not sure exactly where the issue is.

5

Hello @spacetimerider

It’s displaying correctly on my end. Here’s a screenshot for reference: https://prnt.sc/6-qHCusPkKpl Please let me know if there’s anything else I can help you with.

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

6

There should be text above the Email box like there is with the Country/Region and Language boxes. Also the copyright text at the bottom is missing.

7

Go to your online store > Themes > edit code > assets > base.css, add this css code at the bottom and click Save button

.shopify-section-group-footer-group { z-index: 1; }
1 Like
8

Thank you! That brought all of the text back, but now the footer background is black. LOL Any ideas on how to resolve that?

9

In case anyone needs the info in the future… I removed the black background by adding the following code to base.css

.footer{
  background-color: transparent !important;
}