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
9 replies to this topic

#1 Tehbeardedgamer

Tehbeardedgamer

    Newbie

  • Members

  • 9 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
  • 13067 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

    Newbie

  • Members

  • 9 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
  • 13067 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 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2469 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
  • 13067 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 February 2014 - 11:15 AM

Thanks for informing us the issue has been resolved.



#9 awshimagmailcom

awshimagmailcom

    Member

  • Members
  • PipPip
  • 12 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

    Super Member

  • Members

  • 180 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







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