• 0

Hero Section, Transparent IMG background.


Question

Posted (edited) · Report post

I am using a hero section, My hero section background is transparent, but the image box inside it is filled with my default content filler color. I cant seem to find out where to change the css to make the Image background transparent.

 

http://fall2gravity.com/mgc/?page_id=14

 

A link to the page in question. All the images are PNG. I did cut out the background in PS.

 

Thanks in Advance!

 

Beard

 

EDIT:  I will also need the code to change it.

Edited by Tehbeardedgamer

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

Hi Beard, Add the following to your custom code.
#site .section-hero .pl-imageframe {
background: rgba(0, 0, 0, 0);
border: 0 none;
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Beard, Add the following to your custom code.

#site .section-hero .pl-imageframe {
background: rgba(0, 0, 0, 0);
border: 0 none;
}

Thank  you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi I'm using the latest version of DMS and when I add this code to the custom CSS it has no effect. Can you please help. I need to add hero sections with png pictures that have no background or border.  Thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Could you start your own Topic please with links to your site and we can take a look at this for you. It is likely the code will be different for your setup. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you I found the correct code on the DMS forum after registering our paid account correctly.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for informing us the issue has been resolved.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello,

 

I'm having the same problem, but it started today after upgrading DMS to 2.0.3, I was using 2.0

 

The hero is in a section with a background image.

 

The hero image is a transparent PNG, and now in version 2.0.3 there is a white background in the image.

 

And without a image configured in the hero you can see a white square with round borders.

 

Using the CSS suggested in this thread the the image is now transparent, but the border is still there, as you can see in this page:
 

http://dev.zooming.com.br/construtor-de-sites/

 

How can I fix that?

 

Thanks,

Alexandre

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

awshimagmailcom you need to add in to that CSS

 

box-shadow: none;

 

Chrome Developer tools are very useful to identifying and changing CSS on your site before implementing on your live site

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm having the same issue, but the opinion to insert box-shadow:none; doesn't work for me. I'm posting into Inline CSS Styling. Are there any other tips? 

 

Hello,

 

I'm having the same problem, but it started today after upgrading DMS to 2.0.3, I was using 2.0

 

The hero is in a section with a background image.

 

The hero image is a transparent PNG, and now in version 2.0.3 there is a white background in the image.

 

And without a image configured in the hero you can see a white square with round borders.

 

Using the CSS suggested in this thread the the image is now transparent, but the border is still there, as you can see in this page:
 

http://dev.zooming.com.br/construtor-de-sites/

 

How can I fix that?

 

Thanks,

Alexandre

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

corykbarros you are adding it to the wrong place. It needs to go with Danny's code and with box-shadow: none; added ie :

 

#site .section-hero .pl-imageframe {
background: rgba(0, 0, 0, 0);
border: 0 none;
box-shadow: none;
}
 
This needs to be placed in your </>Custom (in DMS live editor) or in WP Admin > DMS Fallbacks > Custom LESS

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now