Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #753299

    Hi there,
    I’m a bit stuck.
    AIM:
    I’d like to have a background radial gradient in my footer but also retain the option to select a custom background overlay image in the Enfold theme settings so I can put a top shadow that repeats horizontally. Is that possible?

    Currently, when I add the radial gradient to the #footer or .footer-color (or many other combinations) CSS, it is in front of the uploaded custom image and the shadow can’t be seen.

    My CSS code:

    #footer {
    background-image: -ms-radial-gradient(center top, ellipse farthest-corner, #FFFFFF 0%, #DADBE2 100%);
    background-image: -moz-radial-gradient(center top, ellipse farthest-corner, #FFFFFF 0%, #DADBE2 100%);
    background-image: -o-radial-gradient(center top, ellipse farthest-corner, #FFFFFF 0%, #DADBE2 100%);
    background-image: -webkit-gradient(radial, center top, 0, center top, 359, color-stop(0, #FFFFFF), color-stop(100, #DADBE2));
    background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #FFFFFF 0%, #DADBE2 100%);
    background-image: radial-gradient(ellipse farthest-corner at center top, #FFFFFF 0%, #DADBE2 100%);}

    Custom background image (transparent png) set in Enfold theme settings

    .footer_color {
        background: #ffffff url(" (Email address hidden if logged out) ") repeat-x scroll center top;
        z-index: 1;}

    You will need login credentials to see the site. Below if required.

    #753906

    Hey lucindaholland,

    I’m not sure what you mean but if you are trying to add a shadow effect along with the gradient have you tried the box-shadow inset property?

    Please check the Inner Shadow section in this link https://css-tricks.com/almanac/properties/b/box-shadow/

    If still need to use the image with a gradient please check this example https://css-tricks.com/tinted-images-multiple-backgrounds/

    Hope this helps :)

    Best regards,
    Vinay

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.