Header image isn't responsive
-
I want to convert my child theme to use Twenty Thirteen as a base but I noticed that the header image isn’t responsive to screen size as rest of page is.
I understand the developers still think of the header as background art but some like me use it the old school way for a fancy title image for my blog.
It would be real nice to have away for the header image to scale like the one in Twenty Twelve did.
Any suggestions or plugins that will do that?
-
I looked at your css file at https://amberandsteph.com/wp-content/themes/twentythirteen-child/style.css and didn’t see the code. Did you save the file back when you added it?
When I added the code using Firebug it worked for me.
I went back in and deleted it after it didn’t work. Does is take time or is it immediate?
I just put it back in, still no change so far
I did notice you have an inline style section for your background photo https://amberandsteph.com/wp-content/uploads/2014/02/assitebanner121.jpg – it isn’t in your child theme css file.
It has the selector: twentythirteen-header-css
Try to add that to the code
.site-header .twentythirteen-header-css {
background-size: 100% 100% !important;
}See what that does
You have a complicated header because of the form element.
Try adding the site header code to the css file your form7 plugin uses. The issue doing that is when the plugin gets updated you will have to add the code back to the file each time:
.site-header {
background-size: 100% 100% !important;
}Add to /wp-content/plugins/contact-form-7/includes/css/styles.css
It it still doesn’t work then you will need to edit your header file that has this code in it:
<style type="text/css" id="twentythirteen-header-css">
.site-header {
background: url(https://amberandsteph.com/wp-content/uploads/2014/02/assitebanner121.jpg) no-repeat scroll top;
background-size: 1800px auto;
}
.site-title,
.site-description {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
</style>Where you see the background-size: selector you would need to change the numbers to 100% 100% !important instead of the 1800px auto;
Try adding the code to the form css first
i can’t find:
/wp-content/plugins/contact-form-7/includes/css/styles.cssi went to contact form 7 plugin editor and all files are php.
that form on header is a mailchimp optin (currently non-functioning) not sure if that makes a difference.
anyway, i went to my child’s theme file funtions.php (the scary place i went last times and crashed my site! :P) and found:
<style type=”text/css” id=”twentythirteen-admin-header-css”>
.appearance_page_custom-header #headimg {
border: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
<?php
if ( ! empty( $header_image ) ) {
echo ‘background: url(‘ . esc_url( $header_image ) . ‘) no-repeat scroll top; background-size: 1600px auto;’;
____________________________________________Then I found the image (assitebanner121) in my header.php file of child theme. here is the file:
* Displays all of the <head> section and everything up till <div id=”main”>
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
?><!DOCTYPE html>
<!–[if IE 7]>
<html class=”ie ie7″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if IE 8]>
<html class=”ie ie8″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if !(IE 7) | !(IE 8) ]><!–>
<html <?php language_attributes(); ?>>
<!–<![endif]–>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width”>
<title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
<link rel=”profile” href=”https://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
<!–[if lt IE 9]>
<script src=”<?php echo get_template_directory_uri(); ?>/js/html5.js”></script>
<![endif]–>
<?php wp_head(); ?><?php if (!is_front_page()): ?>
<style type=”text/css”>
.site-header {
background-image: url(/wp-content/themes/twentythirteen-child/images/assitebanner121-slate.jpg);
}
</style>
<?php endif; ?>
</head><body <?php body_class(); ?>>
<div style=”background: rgba(255, 255, 255, 0.25);z-index:5; width:100%; height:50px; position:relative;”>
<div style=”width:335px; height:50px; position:absolute; left: 8.75%; top: 1px; “>
<?php if (is_front_page()): ?>
<img src=”https://amberandsteph.com/wp-content/uploads/2014/04/AMBERSTEPHPNG125hearts2.png” alt=”Amber & Steph” height=”60px” width=”105%”>
<?php else: ?>
<img src=”<?php echo get_stylesheet_directory_uri(); ?>/images/AmberAndSteph-slate.png” alt=”Amber & Steph” height=”35px” width=”100%”>
<?php endif; ?>
</div><div id=”theresmore” style=”top: 0px; position: absolute; left: 57%; float: right;”>
<?php if (is_front_page()): ?>
<img src=”https://amberandsteph.com/wp-content/uploads/2014/04/somethingmorecordia125.png” width=”75%” height=”55″ alt=”Raising Consciousness” height=”30px”>
<?php else: ?>
<img src=”<?php echo get_stylesheet_directory_uri(); ?>/images/TheresMore-slate.png” alt=”Raising Consciousness” height=”30px”>
<?php endif; ?>
</div>
</div><div id=”page” class=”hfeed site”>
<header id=”masthead” class=”site-header” role=”banner”>
<?php echo do_shortcode(‘[contact-form-7 id=”50″ title=”Contact”]’) ?>
</header>
<div id=”navbar” class=”navbar” style=”background-color: #ffffff;”>
<nav id=”site-navigation” class=”navigation main-navigation” role=”navigation”>
<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentythirteen’ ); ?></h3>Not sure where to change since it doesn’t look exactly like you said and I have much fear of crashing my site again. ?? Thanks a million!
When you are using the plugin editor in the admin, look on the right side of the screen and the list of files. The one you need will be listed as “contact-form-7/includes/css/styles.css”
I don’t have the plugin myself but the ones I have that do have css files show up in my plugin file listing in the editor
The other item about changing the header file:
if ( ! empty( $header_image ) ) {
echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1600px auto;';It should say background-size: 1800px auto; – but you should still edit to background-size: 100% 100%;
Again really try to add the code to the form css file first before you edit the function file
The items I mentioned have to be there because I got the info from viewing the page source and using Firebug
so you are saying i should change this:
if ( ! empty( $header_image ) ) {
echo ‘background: url(‘ . esc_url( $header_image ) . ‘) no-repeat scroll top; background-size: 1600px auto;’;to this: (what will this do?
if ( ! empty( $header_image ) ) {
echo ‘background: url(‘ . esc_url( $header_image ) . ‘) no-repeat scroll top; background-size: 1800px auto;but to get the image to be mobile responsive change it to this:
if ( ! empty( $header_image ) ) {
echo ‘background: url(‘ . esc_url( $header_image ) . ‘) no-repeat scroll top; background-size: 100% 100%;
_____________________________________________________this is all in my child’s functions.php file. if i make this change i’m not gonna cause any problems am i?
also, i went to plugin editor and all files were php. no css. :/
That’s why it is better to edit CSS files instead of function files because if you make mistake with the CSS the worst that will happen is the code will be ignored.
Do you have any other way to edit that “contact-form-7/includes/css/styles.css”? I use Filezilla and a text editor instead of the editor in the admin. Do you have access to the file manager on your webhost control panel – you can use it to edit the file.
If you can’t find a way to edit the contact form css then make the change to the code in the function file.
Just change the 1600px auto in background-size to 100% 100%
I wasn’t able to get the coding suggestions made here to work for my site (they made the header look strange, either with too much space as mentioned above, or with a stretched image).
I tried a number of additional code-based suggestions to get a responsive header from other threads as well, also with no luck. Finally, I ended up replacing the header image with a responsive image slider widget. This worked well, and ultimately was easier.
Here’s what to do:
1. Remove header image
2. Install and activate an image slider plugin. I used
“ResponsiveSlider”. “Easing Slider Lite” should also work.3. Add your header image as a slide, and set the appropriate size dimensions.
4. Put the appropriate code in the header.php file (see the plugin documentation to get the code) where you want it to appear on your website. I put the code right in between the header-related code and the body-related code.
Done!
All I did was add this CSS to my Jetpack CSS editor and it worked fine.
/* Header Responsive */ .site-header { background-size: 100% 84% !important; }
Hi jmeyer2485!
I try your solution: works pretty fine for having my navigation bar stiucked to my header image. But the image is not correctly responsive: the height is not resizing correctly!
Any idea?
- The topic ‘Header image isn't responsive’ is closed to new replies.