-
Posts
-
Hi There –
I’ve used the colour section for the blue part on my website, and I’ve uploaded a background iimage. I want to display a gradient background colour so I’ve assigned a custom class to the blue section of my site here
.sd-blue{
background: #3574b9; /* Old browsers */
background: -moz-linear-gradient(top, #3574b9 0%, #16304d 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(top, #3574b9 0%,#16304d 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #3574b9 0%,#16304d 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#3574b9′, endColorstr=’#16304d’,GradientType=0 ); /* IE6-9 */
}However the gradient style will only work if I put !important and remove the background colour from the ‘background colour’ section of this avia layout builder
But now the background image wont’ work.
1 – how do I ensure that the background image and the gradient attached to this class work?
thank you
Hey ShortieD,
Thank you for using Enfold.
Remove the image background from the color section then add this in the QuicK CSS field:
.sd-blue:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; background-image: url(https://rfl.shortiedesigns.com/wp-content/uploads/2016/06/blue_bg_top.png); background-position: top right; background-repeat: no-repeat; }Best regards,
IsmaelHi Ismael – okay – this is what I’m trying to do – sorry I wasn’t very clear, never mind having 2 background images…I’ve combined them into one PNG and stretched it to fit – so ignore – however I’m still having issues as per below:
1 – I’ve attached a background image to the avia layout builder
2 – I’ve also written some custom styles to make the blue coloured section have a coloured gradient (see below)
however the issue is – when I add my custom class to the ‘coloured’ module of the layotu builder – as per below – the background image that I’ve uploaded dissapears…How do i a) have the background image I’ve uploaded and the gradient appear…..
thanks
.sd-blue{
border-bottom: 20px solid #ffc72d;
background: #3574b9; /* Old browsers */
background: -moz-linear-gradient(top, #3574b9 0%, #16304d 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(top, #3574b9 0%,#16304d 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #3574b9 0%,#16304d 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#3574b9′, endColorstr=’#16304d’,GradientType=0 ); /* IE6-9 */
}Hi,
To use an image and css gradient on a div please refer to this link https://codepen.io/vinnie/pen/oLBOGq
Best regards,
VinayHi Vinay – I just tried using that and adding it to my child theme CSS
.sd-blue{
width: 100%;
height: 100%;
background: url(‘http://rfl.shortiedesigns.com/wp-content/uploads/2016/06/blue_bg-1.png’) center center no-repeat;
background-size: cover;&:before {
content: ”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}But when I do the background goes white
Here is a screenshot of what i’m trying to do
– I’m trying to have a full width background imge
– and a gradient attached to this particular class…any clues would be great thanks
Hi,
This is out of our support scope but we are happy to help you. We need to take a closer look please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
VinayHi there apologies for the late response – I missed this notification – details below – yes you can disable plugins but please take re-enable them when you’re done and first take a backup with backupbuddy…I have it running every night but it will just depend on when you’re in the site.
Hi,
please check the link in private content.
We set the gradient bg class to the color section and added the below css in Quick CSS
/* Gradient bg*/ .gradient-bg { background: url("http://usabilitygeek.com/wp-content/uploads/2013/07/free-fonts-for-commercial-personal-use.jpg") center center no-repeat; background-size: cover; } .gradient-bg:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; min-height:100%; background-image: linear-gradient(to bottom right, #002f4b, #dc4225); opacity: .6; }Best regards,
Vinay
- You must be logged in to reply to this topic.