-
Posts
-
Hi, I’d like to add a gradient colour to the header (like this example: http://www.marketingdepartment.net.au/images/HeaderExample.png ) – is there a way to do it other than images in a color section or full screen slider?
I would like it to be used on the “Transparent” Header.
Thank you in advance for your help.
Hey!
The example you have in the screenshot can only be achieved using an image however you like to add simple version of gradients that can be done using CSS please send us the website link so we can send you custom css for header to add a gradient background.
You can create gradients using online css tools once you are happy with it you can share the code with us or replace it with our code.
Best regards,
VinayHi,
Maybe this thread will help you out? https://kriesi.at/support/topic/make-background-gradient/
Regards,
RikardI had seen that thread and it didn’t work when I tried it. I think the transparency is the big issue – I need it to go from a transparent color and fade out completely.
Basically, judging on that thread and another i have used, I want to add something like this to the transparent header:
background: -webkit-gradient(linear, left top, left bottom, from(rgba(10, 49, 103, 0.60)), to(rgba(10, 49, 103, 0)));
background: -moz-linear-gradient(top, rgba(10, 49, 103, 0.60), rgba(10, 49, 103, 0));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’rgba(10, 49, 103, 0.60)’, endColorstr=’rgba(10, 49, 103, 0)’);Would that work? How could I implement it?
I think I have worked it out actually. I combined several elements (some from another thread here, and code from another location independent of Kriesi and came up with the below – could you review and let me know if you see anything that may cause an issue?
#header_main {
background: rgba(10,49,103,0.90);
background: -webkit-linear-gradient(top, rgba(10,49,103,0.90), bottom(10,49,103,0)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(top, rgba(10,49,103,0.90), bottom(10,49,103,0)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, rgba(10,49,103,0.90), rgba(10,49,103,0)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, rgba(10,49,103,0.90), rgba(10,49,103,0)); /* Standard syntax (must be last) */
}Hi,
I can’t see any problems with the code you posted, is it working as you would like it to?
Best regards,
Rikard
- The topic ‘Gradient Background’ is closed to new replies.