Support » Theme: Bouquet » Adaptive image in header

  • Resolved alexanderg1995



    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!

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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?

    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() )
    	// If we get this far, we have custom styles. Let's do this.
    	<style type="text/css">
    		// Do we have a custom header image?
    		if ( '' != get_header_image() ) :
    		#branding {
    			background: url(<?php header_image(); ?>);
                            background-size: 100% 100%;

    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.

    K T


    It worked for me too! Thanks!

    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(;
    	#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:

    Thanks for any help!


    Moderator Kathryn


    Automattic Happiness Engineer

    Hi Kay – I’ve answered in this thread:

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adaptive image in header’ is closed to new replies.