WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Featured images: Remove the white squares from zoom and display the background p (6 posts)

  1. Lyubomir
    Member
    Posted 3 months ago #

    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.
    Thanks!

  2. acub
    Member
    Posted 3 months ago #

    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.

  3. Lyubomir
    Member
    Posted 3 months ago #

    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.
    Thanks!

  4. acub
    Member
    Posted 3 months ago #

    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 http://websiter.ro.

  5. Lyubomir
    Member
    Posted 3 months ago #

    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: http://heartandsun.org
    I am afraid this is the limit of my skills. If somebody can complete the snippet I would be very grateful!

  6. acub
    Member
    Posted 3 months ago #

    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.

Reply

You must log in to post.

About this Theme

About this Topic