- This topic has 7 replies, 2 voices, and was last updated 3 years, 9 months ago by
Leo.
-
AuthorPosts
-
July 1, 2017 at 10:22 pm #342680
Spencer
Hi guys,
I’m trying to make the main content area transparent so that the header overlays it.
Here is the link – http://combat.me-dev.net/
I am using the ‘Merge with site header’ but I would like the header to sit behind the main content area.
Is that possible?
Thanks,
SpencerJuly 1, 2017 at 10:29 pm #342682Leo
StaffCustomer SupportHi there,
Not 100% what you mean…like having the welcome to combat driver training also in the header area with the same background image?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 1, 2017 at 11:03 pm #342694Spencer
Hi Leo,
Thanks for getting back to me.
Attached it a link to an image which shows what I am trying to achieve.
http://combat.me-dev.net/wp-content/uploads/2017/06/laptop.png
You can see how the text overlaps the header.
Thanks,
SpencerJuly 1, 2017 at 11:34 pm #342716Leo
StaffCustomer SupportHmm you can try changing the top padding of that section to 0: https://docs.generatepress.com/article/sections-overview/#layout
Not sure how those columns are created but you can try changing the top margin:
#welcome .omsc-box { margin-top: -50px; }
Adding CSS: https://docs.generatepress.com/article/adding-css/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 1, 2017 at 11:44 pm #342724Spencer
Hi Leo,
It’s the white background that I need to change to be transparent
I’ve tried – body { background-color : rgba(0,0,0,0)!important; } but there is still background #fff; coming from somewhere.
Thanks
July 1, 2017 at 11:55 pm #342731Leo
StaffCustomer SupportHmm it doesn’t really make sense to set the body transparent as it’s the last layer (same reason why that option is not in Colors > body > Background.
Your code is already loading and #fff has been overwritten:
https://s3.postimg.org/n9xgkuq2b/2017-07-01_2352.pngThis CSS here should get you close to the screenshot you show above with the merge effect:
#welcome { margin-top: -120px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 2, 2017 at 12:20 am #342745Spencer
Hi Leo,
Yes that has seemed to help.
There is still some white area that the hero is sitting underneath. The hero image is tapered at the bottom but is getting cut off.
Hopefully this image explains a bit better – http://combat.me-dev.net/wp-content/uploads/2017/07/Combat_Driver_Training_–_Fully_accredited_driving_instructor_and_Fully_Insured.png
That horizontal white line shouldn’t be there, the bottom of the image should be displaying.
I hope that make sense.
Thanks
July 2, 2017 at 9:01 am #342877Leo
StaffCustomer SupportActually try adding the image as the background image of the body in Customizer > Background Images > Body
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.