[Support request] How to main the background transparent

[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,
Spencer

[Leo]

Hi 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/

[Spencer]

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,
Spencer

[Leo]

Hmm 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/

[Spencer]

Hi Leo,

It’s the white background that I need to change to be transparent

http://combat.me-dev.net/wp-content/uploads/2017/07/Combat_Driver_Training_–_Fully_accredited_driving_instructor_and_Fully_Insured_and_Dev_Server_-_medev_ftp_me-dev_net_-_FileZilla.png

I’ve tried – body { background-color : rgba(0,0,0,0)!important; } but there is still background #fff; coming from somewhere.

Thanks

[Leo]

Hmm 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.png

This 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/

[Spencer]

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

[Leo]

Actually 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/

[Author]

Posts