WordPress.org

Ready to get started?Download WordPress

Forums

Bouquet
[resolved] Adaptive image in header (6 posts)

  1. alexanderg1995
    Member
    Posted 1 year ago #

    Hi!

    I have a question - how can I do so that the photo in the header would be adaptive.

    The whole theme is adaptive, but the top photo size does not change. whe we change site size.
    Thank you!

  2. jd100
    Member
    Posted 1 year ago #

    I'm also having this problem and would like to learn about a solution. Is there some CSS I can add/change? Something in PHP?

  3. jd100
    Member
    Posted 1 year ago #

    UPDATE: I think I may have figured it out. I don't know if this will break something else, but it seems to work for me for now. Any feedback is appreciated.

    In the WordPress theme editor, I added the following line to "Theme Functions (functions.php)" in the "Add custom header support" section:

    background-size: 100% 100%;

    I added it directly below:

    background: url(<?php header_image(); ?>);

    My new functions.php custom header support section looks like:

    /**
    * Add custom header support
    */
    if ( ! function_exists( 'bouquet_header_style' ) ) :
    /**
     * Styles the header image and text displayed on the blog
     *
     */
    function bouquet_header_style() {
    	// If no custom options for text are set, let's bail
    	if ( HEADER_TEXTCOLOR == get_header_textcolor() && '' == get_header_image() )
    		return;
    	// If we get this far, we have custom styles. Let's do this.
    	?>
    	<style type="text/css">
    	<?php
    		// Do we have a custom header image?
    		if ( '' != get_header_image() ) :
    	?>
    		#branding {
    			background: url(<?php header_image(); ?>);
                            background-size: 100% 100%;
    		}
    	<?php
    		endif;

    Again, I don't know if this affects other things in a negative way, but it fixed the problem of the header image not scaling.

    Feedback is appreciated.

  4. K T
    Member
    Posted 1 year ago #

    It worked for me too! Thanks!

  5. Kay Harrison
    Member
    Posted 7 months ago #

    I am having the same problem. I tried this fix and it squeezes the header image horizontally so it becomes unreadable. If I use
    background-size 100%, it squeezes the header horizontally AND vertically, and repeats. Instead of trying a no-repeat, I want to use a different image for 450px. So, in CSS. I have this:

    @media (max-width: 450px) {
    	#branding{ background-image: url(http://undertheboom.com/wp-content/uploads/2013/09/underboomphone2.jpg);
    	}
    	#branding .header-link {
    		min-height: 90px;
    	}
    etc. }

    My image is 450 x 90px.

    But it does not work. The default header image gets cut off, and the smaller image does not load. I'm a novice, learning quickly, so it could be a missing bracket issue :-), but I can't see it. Here's the site: undertheboom.com

    Thanks for any help!

    Kay

  6. Hi Kay - I've answered in this thread:
    http://wordpress.org/support/topic/smartphone-header-image

    (In future if you could please avoid posting multiple times about the same issue, it allows us to help folks more efficiently, thanks!)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic