Dawn - Resizing part of animated background image by browser size

Store Design
, , ,
1

My site: etherealoasis.co

My theme: Dawn

Here is the code making the animated background work:

Added to base.css

@keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}
@-webkit-keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

@-moz-keyframes move-background {    
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

    @-webkit-keyframes move-background {
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

.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: -4;
}

.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: -1;

   -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: 50vh;
  width: 50vh;
  position: absolute;
  z-index: -1;
  right: 20px;
}

Added to of theme.liquid


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

      
 

       

       

I understand the moon resizes based on the “height: 50vh; width: 50vh;” in “.bgstaticimg”. It looks good on a desktop browser set to “50vh”, and looks best on a mobile phone browser when set to “20vh”.

Is there a way to have it scale from 50vh when at max broswer width and then have it scale to 20vh when on mobile browser?

2

Hi @spacetimerider ,

You can add this css addition code to scale it to 20vh on mobile devices

@media only screen and (max-width: 600px) {
.bgstaticimg{
  height: 20vh;
  width: 20vh;
}
}
3

Thank you! It worked great! I did add a few more lines to make it kinda scale a little more fluidly instead of just one big jump… I’ll share the code in case anyone comes across this in the future and it helps at all..

@media only screen and (max-width: 600px) {
.bgstaticimg{
  height: 20vh;
  width: 20vh;
}
}

@media screen and (min-width: 601px) and (max-width: 749px) {
  .bgstaticimg{
  height: 25vh;
  width: 25vh;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .bgstaticimg{
  height: 35vh;
  width: 35vh;
  }
}

@media screen and (min-width: 990px) {
 .bgstaticimg{
  height: 40vh;
  width: 40vh;
  }