<h1 dir="auto">Summary of the new feature/enhancement</h1>

<p dir="auto">When using the <code class="notranslate">backgroundImage</code> profile setting, the image is anchored to the center of the <code class="notranslate">TermControl</code>. Background images that have a primary point of interest that is <em>not</em> the center are not aesthetically pleasing when either... a large part of this focus is cut off via <code class="notranslate">uniformToFill</code>, or the image is centered via <code class="notranslate">uniform</code> or <code class="notranslate">none</code> and there is a abrupt end to the image before the border of the terminal control.</p>
<h3 dir="auto">Image Example</h3>
<p dir="auto">Here is a background designed for anchoring to the bottom right. If we rely on <code class="notranslate">uniformToFill</code>, then we run the risk of the image's focus getting completely cut off. If we use <code class="notranslate">none</code> or <code class="notranslate">uniform</code>, then the image will display in the middle and abruptly end on the right while the console display has more room. Alignment anchoring would allow us to display the background image as it is intended.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/8319211505781ccf2fd385320b9f8d050be7ec9ee9b20d03a5f30e7877f59073/68747470733a2f2f692e696d6775722e636f6d2f6b5554504c39502e706e67"><img src="https://camo.githubusercontent.com/8319211505781ccf2fd385320b9f8d050be7ec9ee9b20d03a5f30e7877f59073/68747470733a2f2f692e696d6775722e636f6d2f6b5554504c39502e706e67" alt="Preview Figure A (Left) and Figure B (Right)" data-canonical-src="https://i.imgur.com/kUTPL9P.png" style="max-width: 100%;"></a></p>
<p dir="auto"><em>Figure A (Left), shows an image making use of alignment. Figure B (Right), shows the outcome of using the same background without alignment.</em></p>
<h1 dir="auto">Proposed technical implementation details (optional)</h1>

<p dir="auto">Changes would require two additional profile settings shown below, (with center being the default for both).</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;backgroundImageHorizontalAlignment&quot;: &quot;center&quot; | &quot;left&quot; | &quot;right&quot;,
&quot;backgroundImageVerticalAlignment&quot;:   &quot;center&quot; | &quot;top&quot;  | &quot;bottom&quot;,"><pre class="notranslate"><span class="pl-ent">"backgroundImageHorizontalAlignment"</span>: <span class="pl-s"><span class="pl-pds">"</span>center<span class="pl-pds">"</span></span> <span class="pl-ii">| "left" | "right",</span>
<span class="pl-ent">"backgroundImageVerticalAlignment"</span>:   <span class="pl-s"><span class="pl-pds">"</span>center<span class="pl-pds">"</span></span> <span class="pl-ii">| "top"  | "bottom",</span></pre></div>
<p dir="auto">These settings will be needed only once, in this location:</p>
<p dir="auto"></p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/microsoft/terminal/blob/02e8389518c7027fa20a99b4642f29f2b6b4ef7a/src/cascadia/TerminalControl/TermControl.cpp#L273-L276">terminal/src/cascadia/TerminalControl/TermControl.cpp</a>
    </p>
    <p class="mb-0 color-fg-muted">
        Lines 273 to 276
      in
      <a data-pjax="true" class="commit-tease-sha" href="/microsoft/terminal/commit/02e8389518c7027fa20a99b4642f29f2b6b4ef7a">02e8389</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L273" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="273"></td>
          <td id="LC273" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> Media::Imaging::BitmapImage <span class="pl-smi">image</span>(imageUri); </td>
        </tr>

        <tr class="border-0">
          <td id="L274" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="274"></td>
          <td id="LC274" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> _bgImageLayer.<span class="pl-c1">Source</span>(image); </td>
        </tr>

        <tr class="border-0">
          <td id="L275" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="275"></td>
          <td id="LC275" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> _bgImageLayer.<span class="pl-c1">HorizontalAlignment</span>(HorizontalAlignment::Center); </td>
        </tr>

        <tr class="border-0">
          <td id="L276" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="276"></td>
          <td id="LC276" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> _bgImageLayer.<span class="pl-c1">VerticalAlignment</span>(VerticalAlignment::Center); </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">Here, <code class="notranslate">HorizontalAlignment::Center</code> and <code class="notranslate">VerticalAlignment::Center</code> will be replaced with their respective parsed settings of <code class="notranslate">backgroundImageHorizontalAlignment</code> and <code class="notranslate">backgroundImageVerticalAlignment</code>.</p>
<p dir="auto">These two settings will need constant definitions for of their JSON/serialized values, and <code class="notranslate">Parse</code>/<code class="notranslate">Serialize</code> methods for the enums (in <code class="notranslate">Profile.cpp</code>).</p>
<h2 dir="auto">Alternative Setting</h2>
<p dir="auto">One enum setting that combines the flags of <code class="notranslate">HorizontalAlignment</code> and <code class="notranslate">VerticalAlignment</code> could be used. The setting and values would be as follows:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;backgroundImageAlignment&quot;: &quot;none&quot; | &quot;left&quot; | &quot;top&quot; | &quot;right&quot; | &quot;bottom&quot;
                 | &quot;topLeft&quot; | &quot;topRight&quot; | &quot;bottomLeft&quot; | &quot;bottomRight&quot;"><pre class="notranslate"><span class="pl-ent">"backgroundImageAlignment"</span>: <span class="pl-s"><span class="pl-pds">"</span>none<span class="pl-pds">"</span></span> <span class="pl-ii">| "left" | "top" | "right" | "bottom"</span>
                 <span class="pl-ii">| "topLeft" | "topRight" | "bottomLeft" | "bottomRight"</span></pre></div>
<p dir="auto"><em>A value of <code class="notranslate">none</code>, or missing axis alignment, implies that the default action of centering is used. Alternatively <code class="notranslate">none</code> could be labeled <code class="notranslate">center</code> to make this clearer.</em></p>
<p dir="auto">There are pros and cons to this alternative. The pros being the setting name is shorter, and can be fully modified from a single line in <code class="notranslate">profiles.json</code>. The longer enum value names are still relatively simple and easy to remember. The cons being we are not referring to a real existing enum anymore, but a combination of enums. We also require more enum definitions and handling cases than if we made each setting separate. Lastly the implied <em>centering</em> with the values of <code class="notranslate">none</code>, <code class="notranslate">left</code>, <code class="notranslate">top</code>, <code class="notranslate">right</code>, and <code class="notranslate">bottom</code> are not as user-friendly.</p>
<p dir="auto">How to do that can be open Windows Terminal and running it when i trying to clicked a .bat batch file?</p>
<p dir="auto">Like right click deploy.bat --&gt; use "Windows Terminal" open.</p>