Search code examples
csssvgpixel

SVG background image scaling issue

I'm using an SVG (white triangle) as a background image on a before pseudo-element, as seen in the image. If I set the height to be the same size of the SVG, it doesn't have the half pixel line. But because I need this to be responsive, I've set the background-size to be "cover" (same result if I use "contain").

Here is my CSS code implementing the red stripe with the white triangle: 

#careers{margin:7em 0 0}
#careers a{width:100%;height:auto;overflow:hidden;display:block;-webkit-box-shadow:7px 10px 11px 0 rgba(0,0,0,.16);-moz-box-shadow:7px 10px 11px 0 rgba(0,0,0,.16);box-shadow:7px 10px 11px 0 rgba(0,0,0,.16)}
#careers a img{width:100%;height:auto;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-ms-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;display:block;z-index:10}
#careers a:hover img{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05)}
#careers .col-md-5{z-index:15}
#careers .careers-holder{padding:0 15% 0 15px;color:#fff;z-index:10}
#careers .careers-holder .btn{width:auto;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block}
#careers::before{content:'';position:absolute;width:calc(100% - 4.1666665%);height:385px;left:0;right:0;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);background:#d02139 url(http://ranfurlie.website.2018.360southclients.net:8080/img/icon-triangle-white.svg) top right no-repeat;background-size:cover;z-index:1}
<section id="careers">
    <div class="container-fluid">
        <div class="row vertical-align">
            <div class="col-md-1"></div>
            <div class="col-md-5">
                <a href="<?php echo $careers_link; ?>"><img src="<?php echo $careers_image[0]; ?>" width="705" height="450" alt="Careers" /></a>
            </div>
            <div class="col-md-5 careers-holder">
                <h3>Careers</h3>
                <h2>Interested in working for us?</h2>
                <p>We are rapidly growing and always need talent to continue our pace. If you’re up for a great challenges and the rewarding career, check out our current positions available.</p>
                <a href="<?php echo $careers_link; ?>" class="btn white">Read more</a>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>
</section>

Here's the HTML for that section:

1 pixel line

Any idea how or why there's a half pixel of the red? The SVG background image is set to be top right.

The SVG itself can be found here:

http://ranfurlie.website.2018.360southclients.net:8080/img/icon-triangle-white.svg

EDIT: I've added set width and height in the SVG code, which seems to have fixed the pixel issue for Firefox, but it's still showing on Chrome. I don't have a mac to test other browsers.

Solution

  • Do not add width and height to the SVG Element, or background-size:cover in CSS. The SVG way of positioning and sizing works via attribute preserveAspectRatio:

    <svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 347 385" preserveAspectRatio="xMaxYMax slice">

    It will make sure the viewBox covers the whole element background and is positioned so that the top right corners coincide.

    (The rest of the attributes that were set on the svg element are not evaluated.)