Jump to content


Photo
- - - - -

Hero Section, Transparent IMG background.

Transparent Hero CSS

Best Answer Danny , 09 October 2013 - 10:52 AM

Hi Beard, Add the following to your custom code.

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


  • Please log in to reply
11 replies to this topic

#1 Tehbeardedgamer

Tehbeardedgamer

    Member

  • Members

  • 12 posts
  • Country: Country Flag

Posted 08 October 2013 - 11:13 PM

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....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, 08 October 2013 - 11:14 PM.


#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17972 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 09 October 2013 - 10:52 AM   Best Answer

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

  • Tehbeardedgamer likes this

#3 Tehbeardedgamer

Tehbeardedgamer

    Member

  • Members

  • 12 posts
  • Country: Country Flag

Posted 10 October 2013 - 12:49 AM

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.



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17972 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 October 2013 - 07:21 AM

No problem.

#5 tecjaseplym

tecjaseplym

    Newbie

  • Members
  • Pip
  • 6 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 27 February 2014 - 06:05 PM

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



#6 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 27 February 2014 - 06:07 PM

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. 



#7 tecteamplymouth

tecteamplymouth

    Newbie

  • Members

  • 3 posts
  • LocationPlymouth
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 28 February 2014 - 10:13 AM

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



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17972 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 February 2014 - 11:15 AM

Thanks for informing us the issue has been resolved.



#9 Shima

Shima

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 10 April 2014 - 02:26 AM

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.c...rutor-de-sites/

 

How can I fix that?

 

Thanks,

Alexandre



#10 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 10 April 2014 - 06:34 AM

@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



#11 corykbarros

corykbarros

    Newbie

  • Members
  • Pip
  • 5 posts
  • Country: Country Flag

Posted 10 May 2014 - 06:56 AM

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.c...rutor-de-sites/

 

How can I fix that?

 

Thanks,

Alexandre



#12 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 13 May 2014 - 06:01 PM

@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






Also tagged with one or more of these keywords: Transparent, Hero, CSS