1

Trying to find the answer quite long, but I am not even sure how to express the question to searchbar - so I'll try to explain here and if you know that it was already answered I will be happy for the link :)

I am creating a wordpress theme using The Underscores framework. I want make my header to be dependent on the background image height. I mean - I can upload there an image of any size and header's width will be 100 % of image and height wll be dynamically change according the screen size.

Better for imagination, here's an example: http://hitchdiary.cz/

Try to change size of the window - image is allways fully displayed and the height of the header changes.

So that's what I want. What I have is a static size header and background image is adjusting according the screen size.

.site-header {            
    height: 100%;
    width: auto;
    background-color: #000;
    background-size: 100%;
}

Header image is set by user in wordpress adjust section. In code it is this way:

<?php if ( get_header_image() ){ ?>
            <header id="masthead" class="site-header" style="background-image: url(<?php header_image(); ?>)" role="banner">
    <?php } else { ?>
            <header id="masthead" class="site-header" role="banner">
    <?php } ?>

Thanks for any advice. Sorry if that's obvious. I'm quite a newbie.

WHAT'S GOING NOW:

demo

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Balu
  • 33
  • 4

1 Answers1

1

The height is calculated automatically according to the content in the div. By setting it to 100% you're telling it to take the height of the parent container.

Setting height to auto will solve your problem.

.site-header {            
    width: auto;
    background-color: #000;
    background-size: 100%;
}

or 

.site-header {            
    height: auto;
    width: auto;
    background-color: #000;
    background-size: 100%;
}

Flexible Width

Sorry I mistook it to be flexible width instead of height. Please ignore what comes below this statment. However it might help you in adjusting width in the future.

By default div, header, footer etc are block elements. They take up 100% of the parent div.

Say you have a

<div class="parent" style="width:500px;">
    <div class="child"> </div>       
</div>

Here the inner div takes up 500px as well.

I tried out similar code, all you have to do set display to inline.

.site-header {
    display: inline;
}

You can even try floating it to the left/right in case making it inline doesn't work.

You can read more about the differences between block and inline

Abhirath Mahipal
  • 938
  • 1
  • 10
  • 21
  • Thanks a lot for reaction! However ii doesn't work for me. I guess there will be some magic in code I can't see or I just did something wrong :/ – Balu Aug 20 '16 at 17:18
  • Please share some more details then. I'll try fixing it. This is what is done for height. It automatically takes up the height of the content. – Abhirath Mahipal Aug 20 '16 at 19:32
  • http://stackoverflow.com/questions/11099930/100-width-background-image-with-an-auto-height?rq=1 Read this. It suggests using an image tag directly. Why do you want to use the image as the background? Using the tag inside works as well. – Abhirath Mahipal Aug 20 '16 at 19:34
  • Thanks! I just followed tutorial - that's why ;) I used img tag and the Image behaves the way I want now. But I am solving another problem - how to make content (site name and site description) overlay the header. – Balu Aug 21 '16 at 14:50
  • @Balu Use position absolute and Z Index. You can google those. Quite easy :) https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ – Abhirath Mahipal Aug 21 '16 at 14:52