Jump to content

Archived

This topic is now archived and is closed to further replies.

KimAnn03

Hero image background color

Recommended Posts

KimAnn03

Hi,

 

I would like there to be no background color on my Hero image. This graphic is transparent and should not have any background so is there something with the Hero image that adds a boxed background or something?

 

Please advise.

 

THank you,

Kim

 

http://dev.thecosmicpath.com/

Share this post


Link to post
Share on other sites
James B

Hi there,

 

Yes you're correct, theres a white background being applied behind the image. You can remove this using css. Paste the below into your css/less panel

 

.pl-imageframe img, img.pl-imageframe {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    padding: 4px;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B

You're welcome, have a good weekend


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
KimAnn03

@James-

 

Can I make the image in the hero box (see above) larger? I'd like it to be almost double that size where it is almost touching the Hero text. Using the percentages given in the HERO section makes it a mess.

 

Thanks,

Kim

Share this post


Link to post
Share on other sites
Danny

The text area and image area can be reduced or increased. However, if you wish to have your image closer to the text, you're going to need to manipulate your image, as using CSS will most likely cause issues with your alignment when viewed on mobile devices.

So what I would recommend is you edit your image so that the Earth and the beams of light are closer to the left hand side of your image as possible and also reduce the size of the image slightly.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
KimAnn03

Thanks Danny . I wwill align the image more to the left but ALSO want to make it bigger. Can you advise on that?

Share this post


Link to post
Share on other sites
Danny

You can increase the area of which the image will cover by using the Hero options - http://d.pr/i/LAnR

 

Another option would be to create a custom class containing the image itself and then add that class to your hero sections styling classes field, some additional CSS may be required to position it correctly, but you get the idea.

 

http://d.pr/i/Qzyl

 

CSS I used:

 

.hero-bg-img {
background-position: right center;
background-repeat: no-repeat;
}
 
Then I add the following 
 
hero-bg-img
 
To the Hero sections styling classes field and set the text area to 90%

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×