[FlightwaveParticipant]

How can I create a simple gradient page background to match our business card (attached). How do I create a gradient background to match that, and how do I add it to a page?

Thanks.

[LelyModerator]

Hello There,

Thanks for posting in.
You may add the following CSS via Appearance > Customizer > Custom > CSS:

.page {
  /* fallback */
  background-color: #597ee9;
  background-repeat: repeat-x;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#597ee9), to(#231b53));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #597ee9, #231b53);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #597ee9, #231b53);

  /* IE 10 */
  background: -ms-linear-gradient(top, #597ee9, #231b53);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #597ee9, #231b53);
}

Above will add the gradient background for every page. If you want it for just specific page, please forward the URL to us so we can check and adjust.
This link for gradient might help:https://css-tricks.com/examples/CSS3Gradient/

[FlightwaveParticipant]

I did as instructed, but now it’s just a white background. Url is: e30.746.myftpupload.com/home/

[FlightwaveParticipant]

Hey – need an answer on this guys. Client waiting. Can’t implement a simple gradient background – with the CSS code you’ve given me – why is it just white now? Why is it not working. Please respond.

[Rue NelModerator]

Hello There,

Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

Of course, on this page, e30.746.myftpupload.com/home/, it will not be displaying anything. You have selected the Blank – No Container | No Header, No Footer and you do no have anything on the page. By default, the height is zero. Please add something so that you will see the blue gradient background on the page. http://prntscr.com/8z6o7w

We would suggest that you create your page in Cornerstone. You can easily build any layout you want on this page. After that, inorder to apply the blue gradient, you can insert the following custom css in the settings tab, Settings > Custom CSS

.page {
  /* fallback */
  background-color: #597ee9;
  background-repeat: repeat-x;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#597ee9), to(#231b53));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #597ee9, #231b53);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #597ee9, #231b53);

  /* IE 10 */
  background: -ms-linear-gradient(top, #597ee9, #231b53);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #597ee9, #231b53);
}

To know more about Cornerstone, please check it out here: http://theme.co/blog/x-version-4-introducing-cornerstone/

Hope this helps. Please let us know how it goes.

[Author]

Posts