Beginnerprogrammer Beginnerprogrammer - 10 months ago 47
CSS Question

jquery mobile and CSS fixed gradient for every page the same

I have several pages where I use an gradient as background and an footer which matches the bottom gradient color. Thereby I have a second page which is longer than the dashboard page and the footer mismatches the color. I would like to set an static gradient for each and every page.

As you can see
enter image description here

This is how I styled the background:

.background {
background-image: -webkit-linear-gradient(#00cef4,#00a0e5);
background-size: 100% 100%;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;

and this is the styling of the footer:

.ui-footer {
background-image: linear-gradient(#00a6e7, #00a0e5);
border-color: transparent !important

.footer a:after {
background-color: transparent !important;
/*border-color: transparent !important;*/
height: 70px;

.ui-footer, .footer, .footer li, .footer a {
height: 70px;

Answer Source

you could try this.
separate the viewport in 2 sections:


  <div class="content">everything goes here</div>
  <div class="footer">buttons go here </div>


  height: 100vh; /* full display size */
  overflow-y: auto; /* everything bigger will scroll like normal */
  padding-bottom: 45px; /* Whatever height you give the icon section */
  box-sizing: border-box; /* this + the padding will make sure your content stops extactly where the footer sta */
  position: absolute;
  bottom: 0;
  height: 45px;
  /* gradient stuff here */