[Tanya HParticipant]

Hi guys

I would like to add a gradient background and was hoping to create a CSS background rather than an image one as I understand it is a lot lighter on load time and is far more responsive.

I did read a post on the forum about this (my apologies I don’t seem to be able to find it again to give you the link). I didn’t quite understand the process as it seems quite complex and I was hoping you could talk me through it in as simple terms as possible.

I’m using Integrity light
Newest version
Updated x shortcodes.

I have also added a private post below.

[Tanya HParticipant]

This reply has been marked as private.

[RadModerator]

Hi Tanya,

Thank you for writing in!

Add this css at your customizer’s custom css :

body, .site {
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
}

Hope this helps.

[Tanya HParticipant]

Hi again.

Thank you so much for the code. I added it but unfortunately there has been no change. I have double checked that I put the code in correctly and waited for a while as I know sometimes it can take some time to properly reflect on the site.

Is there something else I can try that may work?

[RadModerator]

Hi Tanya,

The gradient background was applied correctly. Please check the screenshot and notes http://awesomescreenshot.com/0cf2ueeqd4

Now the question is, do want it darker gradient? Do you want your content background as transparent or gradient too? Which currently as colored white that block most of gradient background.

Thank you.

[Tanya HParticipant]

This reply has been marked as private.

[RadModerator]

Hi Tanya,

How about this one 🙂

body, .site {
background: rgb(255,255,255);
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 46%, rgba(86,86,86,1) 63%, rgba(17,17,17,1) 78%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(46%,rgba(255,255,255,1)), color-stop(63%,rgba(86,86,86,1)), color-stop(78%,rgba(17,17,17,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 46%,rgba(86,86,86,1) 63%,rgba(17,17,17,1) 78%);
background: -o-linear-gradient(top,  rgba(255,255,255,1) 46%,rgba(86,86,86,1) 63%,rgba(17,17,17,1) 78%);
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 46%,rgba(86,86,86,1) 63%,rgba(17,17,17,1) 78%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 46%,rgba(86,86,86,1) 63%,rgba(17,17,17,1) 78%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#111111',GradientType=0 );
}

Then white container with 30% opacity, you could set it to 0 to make it completely transparent.

.entry-wrap.entry-content {
background-color: rgba(255, 255, 255, 0.3);
}

Then remove white lines from the footer :

.x-colophon + .x-colophon {
border-top: 0px!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

About your booking spaces.

1. You have empty <p> tags that adds a line break. Remove it.

<p style="text-align: left;">
</p>

2. After that <p> tag, you have empty content band. Remove it to reduce another line break.

3. At your custom headline shortcode, add this attribute style="margin-top:0px;"

Hope these helps 🙂

[Tanya HParticipant]

Thank you so much. That was perfect. You guy’s are geniuses! 🙂

[ChristianModerator]

Your welcome Tanya. Glad we could help. 🙂

[Author]

Posts