Svg Background Image Position Is Always Centered in Internet Explorer, Despite Background-Position: Left Center;

svg background image position is always centered in internet explorer, despite background-position: left center;

The problem is not with your CSS but with your SVG. The SVG will grow to fill the entire element box’s background (as expected). How your SVG scale then becomes the controlling factor:

Set a viewBox="0 0 width height" (in pixels) attribute on your <svg> element and remove its width and height attributes. You also need to set preserveAspectRatio="xMinYMid" (x/vertically left-aligned, y/horizontally middle-aligned) on the svg element. This works with Internet Explorer 10 and 11, at least.

<svg viewbox="0 0 64 64"
    preserveAspectRatio="xMinYMid">
    … </svg>

Learn more about the preserveAspectRatio and viewBox attributes. Source, “Getting started with SVG” in the IEblog.

background-position-x: not working in Internet Explorer

Here is a workaround for IE11

.theChampFacebookLoginSvg {  background: blue url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHBhdGggc3Ryb2tlPSIjZmZmIiBkPSJNMTQgMjUgdiAtMTMgUSAxMyA2IDIxIDcuNSBNIDEwIDE0IEwgMjAgMTQiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ZnPg==') left no-repeat;  width: 240px;  height: 50px;}
/* begin - fix for IE11 */_:-ms-fullscreen, :root .theChampFacebookLoginSvg {  background-position: -120px;}/* end - fix for IE11 */

<div class="theChampFacebookLoginSvg"></div>

How to position a background on one side of centered content while making the BG translucent without distortion?

Background sizing and positioning by themselves shouldn't require more than background properties on the element itself. As long as you can get the content box to shrink to fit the content, background-origin can be used to position the background relative to the content box (or the padding box, if you want the background to extend beyond the content box). However, requiring additional transparency on the background steers this towards a pseudo-element.

An alternative to a pseudo-element that can be used in certain circumstances is to use an inset box-shadow with a partially transparent color to wash-out the image. This only works if the background image is on top of a solid color; the same color is then used as the box-shadow color. Note the transparency of the box-shadow is the inverse of the transparency for the image: the more "transparent" the background is supposed to be, the less transparent the box-shadow color.

The other tricky aspect is in how you shrinkwrap the content. The simplest is to use a width of fit-content, though it's not supported in older browsers:

.heading-bg-logo {
color: blue;
width: fit-content;
margin: auto;
padding: 0 0.5em;

/* The spread-radius needs to be large enough to cover the background */
box-shadow: 0 0 0 1000px inset rgba(255, 255, 255, 0.8);
background: url("https://images.unsplash.com/photo-1581079289196-67865ea83118?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3269&q=80");
background-origin: padding-box;
background-repeat: no-repeat;
background-size: contain;
}

<span>content before</span>
<h2 class="heading-bg-logo">Test Heading</h2>
<span>content after</span>

Why doesn't my SVG background-image work?

There are a few potential solutions here.

Revisit how you created the SVG. The software you use and the method you generate it with (e.g. in Illustrator) matter greatly. There's a pretty specific way of doing it correctly.

_{This was the solution for OP; see comments for specifics}

Making absolutely positively sure that tech_bg.svg is in the directory that it's supposed to be (the img folder) and that it's spelled exactly the same as it is in the text editor, including case sensitivity of the filename and file extension. GitHub certainly takes extension case sensitivity literally and I've had problems uploading SVG files for that same reason (.svg vs .SVG).
Increasing the z-index of #aboutprocess, particularly if your text really has disappeared (I'm assuming it's still there, just white, but try highlighting it to make sure). Play around with the other CSS values nearby like no-repeat, left, top, etc, too.
Try clearing your browser cache and refreshing once, and try other browsers too. Also, if by some chance you happen to be using IE8 and below or Android 2.3 and below, that would definitely be the cause; they don't support SVGs in background-images.

It's a tough question to answer definitively since we can't be there testing it with you on your local machine, which is where the inconsistency is happening.

SVG background size differs in Internet Explorer 9 & 10

I had a similar problem with svg files generated by Illustrator for use as background images, and after much trial and error the fix seems to be just to edit each svg file and declare the width and height of the svg as attributes, e.g. <svg width="32px" height="128px"> (something that Illustrator doesn't set but Sketch does). This caused the svgs to behave the same in IE 10/11 as they do in Chrome/FF.

Background image not starting from top left

Your code is right. There's nothing wrong with it so... I just can guess your image is like that... with a trasparent top border. Check it out in any image editor

html {
    font-size: 16px;
    height: 100%;
}

body {
    font-size: 1.2rem;
    line-height: 0.7rem;
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}

/***** Header styles ******/
header {
    display: block;
    height: 30%;
    width: 100%;
    position: relative;
}

header .top-bar {
    z-index: 2;
}

header .prod-thumbnail {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background:  url(https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
    background-size: cover;
    background-position: 0 0;
    z-index: 1;
}

<header>
        <div class="top-bar">
            <!-- Hamburger menu-->
            <div class="hamburger-btn">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <!-- Logo-->
            <div class="logo"></div>
        </div>
        <div class="prod-thumbnail"></div>
    </header>

Svg Background Image Position Is Always Centered in Internet Explorer, Despite Background-Position: Left Center;