Tagged: , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 28, 2014 at 6:15 pm #215941
    gentle_md

    Dear Support,
    I’m using the avia template builder on the enfold-theme.
    I created a fullwidth image-background in the color section.
    Now I want to add an overlay on the image with a transparent pattern, also full-width and under the content.
    I defined the ID and even created an additional class. But it shows only one background and not the “second “pattern” one.
    I guess because it is all in the same ID.
    How can I create this second layer. This “pattern layer” can be shown on all “full-width image-background color section” elements.
    Thanks for your help!

    best,
    Chris
    T

    January 29, 2014 at 10:14 am #216280
    Dude

    Hey gentle_md!

    With CSS3: http://www.css3.info/preview/multiple-backgrounds/ you can add multiple background images to the same element. Basically the code must look like

    
#example1 {
background-image: url(sheep.png), url(betweengrassandsky.png);
background-size: cover;
background-repeat: no-repeat;
}

    and instead of “example1” insert your section id and replace “sheep.png” and “betweengrassandsky.png” with the urls to your images.

    Regards,
    Peter

    January 29, 2014 at 11:04 am #216308
    gentle_md

    Hi Peter!
    Thank you so much for the lesson in css3.
    I had to repeat the pattern so I did this:

    1. in the color section I defined no image and just defined an ID
    2. in CSS I wrote:
    #color-section ID {
    background-image: url(../pattern.png) , url(../background.png) ;
    background-repeat: repeat, no-repeat;
    background-size: auto,cover;
    }

    and it works like a charm!
    Thanks a lot!
    Great Theme! Great support!
    best,
    Chris

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Color section with background-image and transparent pattern overlay’ is closed to new replies.