Header Image Background

Hi lucifaro666. The theme version on the author’s website includes an option to add a header image.

Yeah I know, but I mean that you can put under the logo instead of the background color is not in place of the logo

Even though the header image option states “This will disable header title/logo and description” the theme will actually display all three.

On my site it does not, remove header title / logo and description and version of the template is 2.2.2

Can you post a link to your site?

Hardware MAX

sorry but I can not keep it that way you can see image

OK, my mistake; you are correct. I was looking at a test site that I had modified. Sorry for the confusion. You need to modify header.php to display them at the same time. Copy header.php to your child theme and locate this block of code about 2/3 of the way down:

<?php if ( ot_get_option('header-image') ): ?>
	<a href="<?php echo home_url('/'); ?>" rel="home">
		<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
	</a>
<?php endif; ?>

Change it to add a new <div> and the site title and description:

<?php if ( ot_get_option('header-image') ): ?>
	<div class="my-header-div">
		<?php echo alx_site_title(); ?>
		<?php if ( ot_get_option('site-description') != 'off' ): ?><p class="site-description"><?php bloginfo( 'description' ); ?></p><?php endif; ?>
		<a href="<?php echo home_url('/'); ?>" rel="home">
			<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
		</a>
	</div>
<?php endif; ?>

Then you can use something like this css to position the title and description:

/* disable link on header image */
.my-header-div { pointer-events: none; }
/* enable link on header logo */
.site-title { pointer-events: auto !important; }

/* logo on top of header image */
.site-title {
  float: none;
  position: absolute;
  top: 0;
  left: 25%;
  z-index: 100;
  padding-top: 10px;
  }

/* desc on top of header image */
.site-description {
  float: none;
  position: absolute;
  top: 50px;
  left: 35%;
  font-size: 32px;
  font-weight: 700;
  z-index: 100;
  color: #fff;
  font-size: 2.5em;
  line-height: 0;
  margin-bottom: 10px;
  }

works ok but there is another problem the image remains maximum 960px would be nice being able to extend the full width of the screen

However in the next version would be handy to have these settings on Theme Option

thank you

Another option you could try is not changing the header.php file and then just use css to set a background image; something like this:

/* set header default background image and height */
#header {
  background: url(https://test3.southeugenerowingclub.org/wp-content/uploads/2015/01/020.jpg) no-repeat center top;
  height: 400px;
}

/* push the header menu down */
#header .pad {
  height: 340px;
}

/* reduce content margin to align with bottom of menu */
#page {
  margin-top: -11px;
}

/* media queries to accomodate above changes */
@media only screen and (min-width: 720px) and (max-width: 960px) {
  #header .pad {
    height: 341px;
  }
  #page {
    margin-top: 0;
  }
}
@media only screen and (max-width: 719px) {
  #header .pad {
    height: 400px;
  }
  #page {
    margin-top: 50px;
  }
}

thank you

Hello bdbrown,

it’s exactly what I would like: an image in header background
when I use your CSS code in the style.css (with changing the image address) I see that the header change their dimensions (higher) but I can’t see the image… is it a problem of image size? (I tried with size : 186 kB, Dimensions : 1000 × 579)
my website is https://www.gb-sailingteam.com.

Do you have an idea to help me.

thank’s in advance
Thierry

@thierrypradel – I assume you’re referring to the second option above that doesn’t involve modifying the header.php file. I just checked your site but don’t see that css applied. Where did you add it?

yes correct, I speak about the second option.
I modified the file “style.css” (you didn’t see it because as it was not working. I removed it.
Now I let the code in the file “style.css”. at the beginning of the file.
I’ not sure it’s the right place (I’m beginner in css….;) )

thank’s for helping me
Thierry

It’s not displaying the image because the style is being overridden by the default css which comes after it in the file. I would recommend you not modify the default theme style.css file as you will lose all your changes if you update the theme. A better option would be to either use a child theme or a plugin like Simple Custom CSS.
Here are three articles that explain more about css and how it is applied.
https://www.htmldog.com/guides/css/beginner/
https://www.w3schools.com/css/default.asp
https://www.w3.org/Style/Examples/011/firstcss.en.html
If you have additional questions regarding css or other features of the theme please start a new topic here: https://www.ads-software.com/support/theme/hueman#postform. Thanks.