Need simple HTML help for template header

Use a pastebin when posting code, or backticks as indicated in the reply/post box.
https://wordpress.pastebin.com/

And you just want to convert this…
<div style="background: #fefefe url('') no-repeat; height: 128px;">
to a..
<a href="somelink"><img src="something" /></a>
.. type of thing?

Something like…
<a class="head_one" href="YOUR_LINK_HERE"><img src="<?php get_random_imgurl_in_dir('images/headers'); ?>" alt="header image" /></a>
Then accompany with CSS…

.head_one {
  border: none;
  padding: 0;
  height: auto;
  width: auto;
}
.head_one img {
  border: none
  height: 128px;
  width: auto;
  margin: 0;
}

should do it..

See how you get on..

Close, but not all the way there… this pushes the body of the webpage all the way to the left and doesn’t allow the header to center/resize according to browser window… I’m working on https://www.gordtep.com — just can’t seem to get the header image to stay the way it’s supposed to be and have it appear as a hyperlink at the same time… every time i get it to be a link, the rest of the page is thrown off entirely

If you resize based on the window size it’ll look awful on really large screens..

Anyway, adding this should do it.. (CSS)

#wrap {margin:0;width:100%}
#headerimg img {width:100%;height:auto}

It won’t extend 100% without removing the margin on the wrapper…

These can be removed without fear also..

<div id="topline"></div>

	<div id="headerTitle">

		<h1>
			</h1>

		</div>

If you want to add some space above the header or to the sides, we can do that with the CSS, both those above elements are not needed, so just drop them or comment them out..

I’m still not getting it– it’s some bizarrely complicated CSS thing that I can’t seem to figure out… you’ll see on gordtep.com it’s an utter mess… i currently have the hyperlinked image all out of whack on top and the image I can’t get to hyperlink beneath it looking the way i want it to… what a mess

I mean this in the kindest possible way, but are you paying attention to what i’m putting above…

Source from the page:
<IMG SRC="https://www.gordtep.com/wp-content/themes/homywhite/images/headers/header_1.jpg no-repeat; height: 128px;"> </A>

That’s invalid code.

Take what you have for the header area here…

<div id="header">

<div id="headerimg">
<div id="topline"></div>

	<div id="headerTitle">

		<h1>
			</h1>

		</div>
<A HREF="https://www.gordtep.com">
<IMG SRC="https://www.gordtep.com/wp-content/themes/homywhite/images/headers/header_1.jpg no-repeat; height: 128px;"> </A>

<!--<div class="musicPos">
								<span class="musicInfo">Background Music</span>
			</div>-->
		</div>
	</div>

</div>

Change that for…

<div id="header">
	<div id="headerimg">
		<a class="head_one" href="YOUR_LINK_HERE">
			<img src="<?php get_random_imgurl_in_dir('images/headers'); ?>" alt="header image" />
		</a>
	</div>
</div>

This also removes an extra closing </div> in your code which closed the wrapper element prematurely…

Work from there… and i’ll help where need be…

NOTE: If the URL being generated for the image is adding the incorrect code to the IMG src, then post the code from your functions.php (in your theme folder) into a pastebin (see first response), and i’ll help you re-write it…

I sincerely do appreciate all your help… it’s not perfect, as the header image is shifted to the right a faction of an inch for some reason and the re-size is different– the original resizing was just cutting off the a portion of the right side of the image based on the size of the window (which was how i wanted it), now it resizes the entire thing, but it’s ok. I’m not sure how to adjust that, I think it had something to do with the height 128? Thanks though.

here’s what’s in the functions file:

<?php
/**
 * @package WordPress
 * @subpackage Homywhite_Theme
 */

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));

// Get the random image url in the given relative directory path
function get_random_imgurl_in_dir($rel_img_dir)
{
	$directory = get_template_directory() . "/". $rel_img_dir;
	$dir_url = get_bloginfo('template_directory') . "/". $rel_img_dir;

	if (@is_dir($directory))
	{
		$img_array = array();
		$directory_handle = @opendir($directory);
		while ( false !== ($filename = @readdir($directory_handle)) )
		{
			// Filters out some of the unwanted directory entries.
			if ($filename != "." && $filename != "..")
			{
				// Ficture file, adds to the array stroring the file name
				if (@is_file($directory."/".$filename))
				{
					$file_extension = strrchr($filename, ".");
					if (".jpg" == $file_extension || ".gif" == $file_extension)
						$img_array[] = $filename;
				}
			}
		}

		@closedir($directory_handle);

		$array_count = @count($img_array);
		$random_num = rand(1, $array_count);

		$rand_img_url = $dir_url . "/" . $img_array[$random_num-1];
	}

	echo $rand_img_url;
}

For what it’s worth, here’s the style.css file

[code moderated]

I’m realizing what I should be asking for is how to crop the image on the right side based on the browser window/resolution, so it will extend further if I open… hope this is making sense.

Do I need to use the “overflow: hidden” command somehow?

Perhaps if you give an example of how it “should” look… it would make things easier on both of us, even if it means chopping and cropping in paintshop…

It’s not you personally, but i’m not quite getting at what you want to achieve..