Custom CSS for background and header/top bar [Transparent header]
Hi, I have to different but related problems.
1: I'm trying to use 2 background images - 1 top right and 1 bottom left. I've tried the below in both the custom css in theme options, and in the custom css on an individual page. What am I doing wrong?
{
background: url(wp-content/uploads/2015/02/topright.png),
url(wp-content/uploads/2015/02/bottomleft.png);
background-repeat: no-repeat, no-repeat;
background-position: top right, bottom right;
}
2. I'm using a stacked header and want to make the header/top bar transparent so that the top right image can wrap the content. I've tried using custom css to implement transparency with rgba color and there's no difference.
Page is: http://www.sashandveil.co.uk/?page_id=548
Thanks for any help!
1: I'm trying to use 2 background images - 1 top right and 1 bottom left. I've tried the below in both the custom css in theme options, and in the custom css on an individual page. What am I doing wrong?
{
background: url(wp-content/uploads/2015/02/topright.png),
url(wp-content/uploads/2015/02/bottomleft.png);
background-repeat: no-repeat, no-repeat;
background-position: top right, bottom right;
}
2. I'm using a stacked header and want to make the header/top bar transparent so that the top right image can wrap the content. I've tried using custom css to implement transparency with rgba color and there's no difference.
Page is: http://www.sashandveil.co.uk/?page_id=548
Thanks for any help!
Comments
1. It is not possible to use 2 background images. Only one background image is possible per page.
2. This is very hard to do it and needs a lot of modifications in css. But if you will send us access to your dashboard on pm then we can have a look on it.
EDITED!!! To make transparent header as in this case, you must use below custom css:
#Wrapper, #Content {
background-color: transparent;
}
#Header_wrapper {
background-color: transparent !important;
}
#Wrapper {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
#Top_bar:not(.is-sticky) {
background: none !important;
}