0

I added an SVG image to the background of my page with CSS however I am trying to change the opacity with no luck. I tried adding an image tag but I would prefer adding the image via the background-image property. Is it even possible to change the opacity? The goal is to have a Bootstrap carousel with the Harley Davidson logo (in opacity) behind it.

Please see my CSS code below.

Thank you in advance for your help.

#page2 {
  background-image: url(h-d-logo-shield.svg);
  background-repeat: no-repeat;
  background-size: 900px;
  background-position: center;
  position: absolute;

  display: flex;
  background-color: #fff;
  height: 100vh;
  width: 100%;
}

.carousel {
  width: 800px;
  height: 500px;
  margin: auto;
}
Edwin Castro
  • 1
  • 2
  • 3

2 Answers2

0

Yes Possible. You need to add background of it's before element.

like this.

#page2 {
        position: relative;
        display: flex;
        background-color: #fff;
        height: 100vh;
        width: 100%;
      }
#page2::before {
        content: "";
        background-image: url(h-d-logo-shield.svg);
        background-repeat: no-repeat;
        background-size: 900px;
        background-position: center;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        opacity: 0.75;
    }
Najmul H. Bappy
  • 23
  • 6
0

You can also set .svg-bg:opacity:0.5 in your css, or, open the svg directly on a text editor and change the opacity in the svg code, just like this:

<div style="width:100px;">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">

    <path style="opacity:1;fill:#007aff;fill-opacity:1;stroke:#000;stroke-width:12px;stroke-opacity:0.7;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
    </svg>
    </div>
  
  <div style="width:100px;">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">

    <path style="opacity:1;fill:#007aff;fill-opacity:0.7;stroke:#000;stroke-width:12px;stroke-opacity:1;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
    </svg>
    </div>
  
  <div style="width:100px;">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svgfill-="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">

    <path style="opacity:0.5;fill:#007aff;fill-opacity:1;stroke:#000;stroke-width:12px;stroke-opacity:1;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
    </svg>
    </div>
  
   <div style="width:100px;">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">

    <path style="opacity:1;fill:#007aff;fill-opacity:0.3;stroke:#000;stroke-width:12px;stroke-opacity:1;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
    </svg>
    </div>

   <div style="width:100px;">
    <svg style="opacity:0.5" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">

    <path style="fill:#007aff;stroke:#000;stroke-width:12px;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
    </svg>
    </div>

Notice that there is opacity, which works exactly as the css opacity. It takes values from 0 (transparent) to 1 (full opacity) and it applies to the whole path, or any other element.

There are also fill-opacity and stroke-opacity which applies to change separately the opacity of fill or stroke.

Also notice that in the last svg I removed all opacity modifiers from the path element and add a style="opacity:0.5" to affect the whole svg.

You can also affect svg opacity from the css file by setting there fill-opacity, stroke-opacity and opacity but to do that you should remove any inline modifier within the svg because the inline modifiers take preference just like the inline css does.

Something that will perfectly work inside the svg code or through css is this approach using rgba just like in css. Use it like this fill:rgba(255, 255, 255, 1) which make it possible write a shorter code as you don't have to use fill-opacity, the same to stroke:rgba(0, 0, 0, 1) which substitute the stroke-opacity. This works fine for must modern browsers.

SIMBIOSIS surl
  • 357
  • 3
  • 15