Overlay Image for Person on website

CSS may be suited better for your circumstances.

Before you add styles, make sure you do so in either of the following:
A Child Theme – https://codex.www.ads-software.com/Child_Themes
A Custom Style plugin – https://www.ads-software.com/extend/plugins/custom-style/

Here is the website….

https://www.firstchurchofgodinchrist.org

@ Andrew, where can I find a detail tutorial for CSS for doing that.

In this screenshot
https://awesomescreenshot.com/010d1be0a
Does the red box simulate where you want your pastor image to be?
Sorry if you’re colour-blind, it’ll be at the top-right.

Yep, that is the location where I want it to be.

Providing you use a Child Theme or Custom Style plugin, do the following;
? Add <div class="pastor"></div>" to the header, underneath the <hgroup> tag.
E.g
From

<header id="branding" role="banner" class="clearfix" style="
    position: relative;
">
		<a class="header-link" href="https://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home"></a>
		<hgroup>
			<h1 id="site-title"><a href="https://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home">First Church of God In Christ</a></h1>
			<h2 id="site-description">"For whosoever shall call upon the name of the Lord shall be saved "- Romans 10:13</h2>
		</hgroup>

	</header>

To

<header id="branding" role="banner" class="clearfix" style="
    position: relative;
">
		<a class="header-link" href="https://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home"></a>
		<hgroup>
			<h1 id="site-title"><a href="https://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home">First Church of God In Christ</a></h1>
			<h2 id="site-description">"For whosoever shall call upon the name of the Lord shall be saved "- Romans 10:13</h2>
		</hgroup>
                <div class="pastor"></div>

	</header>

? Add the CSS:

#branding {
 position: relative;
}

#branding .pastor {
 position: absolute;
 right: 50px;
}

The next stage would be adding the image into the HTML or CSS, which do you want to do?

which one is better, html or Css? Any advantages or disadvantages?

HTML would be more semantic for SEO and Accessibility.

Ok let’s go with html. How would you do that?

? Add the image into the header.php file within the <div class="pastor></div> we created,
from

<header id="branding" role="banner" class="clearfix" style="
    position: relative;
">
		<a class="header-link" href="https://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home"></a>
		<hgroup>
			<h1 id="site-title"><a href="https://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home">First Church of God In Christ</a></h1>
			<h2 id="site-description">"For whosoever shall call upon the name of the Lord shall be saved "- Romans 10:13</h2>
		</hgroup>
                <div class="pastor"></div>

	</header>

to

<header id="branding" role="banner" class="clearfix" style="
    position: relative;
">
		<a href="https://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home"></a>
		<hgroup>
			<h1 id="site-title"><a href="https://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home">First Church of God In Christ</a></h1>
			<h2 id="site-description">"For whosoever shall call upon the name of the Lord shall be saved "- Romans 10:13</h2>
		</hgroup>
                <div class="pastor">
                         <img src="/yourDirectory/yourImage.yourImageExtension alt="yourImageTitle" />
                </div>

	</header>

How would you re position the image in the right-hand corner if you need to. I get confused when it comes to positioning images through css.

The right hand corner like this https://awesomescreenshot.com/008d1ew9a
?

I want the image to be kind of big, covering the whole entire area pretty much overlapping….like this..

https://bonner.house.gov/

Try messing about with the positioning:

top: 0;
right: 0;

Or

bottom: 0;
left: 0;

Play about with the ‘0’ values.

what are the ranges for the values: 1-10; 1-100, etc.