Support » Theme: Customizr » Featured images: Remove the white squares from zoom and display the background p

  • I changed the standard white background with an image (in my case it is a pattern). But now, because the background is no longer white, I see white squares around the featured images. I am able to change the color of these background squares to any color but that doesn’t help me because I don’t want a solid color – I want to see the pattern behind. Is there a way to reproduce the same sitewide pattern as a background of the featured pages?
    If you wish to see, here is the link to my site:
    Heart and Sun Foundation

    Right now I use a pattern with which the white squares are almost invisible but still you can see them.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The short answer is: no.

    The zoom effect is achieved by scaling some elements with a very thick border and a large border-radius, which are positioned above the images.

    Unfortunately, border-color does not allow a value of transparent. Yet. So, basically, you need to match the color of .round-div border with the color of the background.

    I was thinking, instead of trying to make it transparent (which is not possible – OK), can I use the same pattern as a background for the featured image? If this is possible then I don’t need to see the sitewide background – I will just overlay it with the same pattern in the area of the white square and will achieve the same result.
    If you figure out something, please, put the full snippet.

    Currently, in CSS, you cannot specify an image as border. Even if you could, you’d have positioning problems. Your only practical solution is to create some sort of frame for your featured pages block, with a solid background, if you want the rest of the page to have an image/pattern background. I did something similar on

    It is difficult to believe but I managed to use an image as a border! I use the following CSS:

    .round-div {
    border-image-source: url(wp-content/uploads/2014/06/foggy_birds.png);
    border-image-slice: 30 30 30 30;
    border-image-repeat: repeat;

    Still, I have two issues remaining:
    1. The zoom became square instead of circle. Square looks fine too but I prefer circle.
    2. The border image looks magnified compared with the sitewide background. I would like to tile it just like the sitewide background.

    I saved the current solution and it can be seen here:
    I am afraid this is the limit of my skills. If somebody can complete the snippet I would be very grateful!

    There is no support for border-image (and it’s family: source|slice|width|outset) in IE 10 and lower, as well as in Opera. I was assuming you needed a cross-browser solution.
    Scroll down to browser support.

    We’re talking about over 40% of internet users here.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Featured images: Remove the white squares from zoom and display the background p’ is closed to new replies.