How to put an image to the header?
Hey guys,
I tried to add an image to my header and edited the size of it. Here you can see my try:
#Top_bar { background-image: url('http://angelpedia.net/wp-content/uploads/Monofile-Schnur-Pose-See.jpg')!important;}
#Top_bar #logo { height: 75px !important; }
#Top_bar .menu > li > a { margin: 20px 0 !important;}
#Top_bar #logo {padding-top:27px !important;}
It worked well, but only on my display size 
When I make the display smaller, the header keeps his absolut value and the image gets cut off. But I want, that the header will get smaller if the display gets smaller and that the image keep full without cuts off.
Here is a nice example, how I would like to have it https://themes.webinane.com/wp/crazy-blog/. There you can see that the image in the header stays in his complete size, but get smaller without cut offs if the display gets smaller.
Is it possible to achieve this?
Thanks
Comments
you will have to play with background-size property. But background images are not responsive and do not work this way. Did you mean that on mobile the background is not visible because of the color replacing it?
thanks
thanks