Support » Themes and Templates » Overlay Image for Person on website

  • I need to overlay a picture of my pastor on the right hand-corner over the borders and a little beside the Contact Us tab. Is there a plugin that can do that or do I need to do some Css scripting… I’m a novice but a fast learner. Thanks!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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 – http://codex.wordpress.org/Child_Themes
    A Custom Style plugin – http://wordpress.org/extend/plugins/custom-style/

    Here is the website….

    http://www.firstchurchofgodinchrist.org

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    In this screenshot
    http://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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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="http://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home"></a>
    		<hgroup>
    			<h1 id="site-title"><a href="http://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="http://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home"></a>
    		<hgroup>
    			<h1 id="site-title"><a href="http://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?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    HTML would be more semantic for SEO and Accessibility.

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    ✔ 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="http://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home"></a>
    		<hgroup>
    			<h1 id="site-title"><a href="http://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="http://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home"></a>
    		<hgroup>
    			<h1 id="site-title"><a href="http://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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

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

    http://bonner.house.gov/

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Overlay Image for Person on website’ is closed to new replies.