Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 31, 2017 at 7:48 pm #770145
    webWahine

    hello

    my test page is in the private area, below. I have a tiled 0.3 alpha cricle as a placeholder using the settings in the color section but I’d like to have just one image centered both vertically and horizontally instead. Please letm know what css is needed to do this and thank you :)

    March 31, 2017 at 8:16 pm #770153
    webWahine

    Ok, I’m getting close but can’t seem to make it just one image. I’ve created a custom class for the overlay and added this –

    /* custom overlay to override section bg overlay settings */

.singleIcon .av-section-color-overlay {
	opacity: 1 !important;
    background-image: url("http://www.terracesatsfu.com/wp-content/uploads/2017/03/logo.png");
	background-repeat: no-repeat center center !important;
	display: block;
    position: absolute;
    top: 0;
    left: 0;
	bottom: 0;
	right: 0;
    height: 100%;
    width: 100%;
}

    As you’ll see it’s now centered and everything is being applied except it’s still tiling – I’m missing something really obvious here?

    April 1, 2017 at 7:11 pm #770398
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    .singleIcon .av-section-color-overlay {
    opacity: 1 !important;
    background-position: center !important; 
    background-image: url(https://www.terracesatsfu.com/wp-content/uploads/2017/03/logo.png) !important; 
    background-repeat: no-repeat !important; 
}

    Best regards,
    Mike

    April 1, 2017 at 7:19 pm #770401
    webWahine

    Worked perfectly!!!!! thanks so much :)

    April 1, 2017 at 10:14 pm #770431
    Mike

    Hi,
    Your welcome and Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘replace tiled section background overlay with a single centered image’ is closed to new replies.