Header Image & Hight

timmogu · Member · Nov 28, 2016 at 9:04 am
Copy link

Add topic to favorites
Hey,

I just realized that in the theme I chose the header is not meant to be an image… is it still possible to do so and if yes… how?

Also how to change the hight of the header? Right now it seems a bit big, especially on mobile phones and such.

Thanks in advance

Best regards
Timmo

The blog I need help with is: (visible only to logged in users)
innisfreehomestead · Member · Nov 28, 2016 at 5:53 pm
Copy link
Hi there, Timmo!

Dropping this code in your custom CSS area should do the trick:
```
.header-wrapper {
	background-image: url(https://taiwantours.files.wordpress.com/2016/09/bopiliao-old-street.jpg?w=616);
	background-repeat: no-repeat;
	background-size: cover;
}
```
Then just replace the url with the url of the image you would like as the background.

As for the header seeming big, I’m not seeing it as super massive etc on mobile. Is this still a problem?

Let me know if that doesn’t work!
Sage
timmogu · Member · Nov 29, 2016 at 6:44 am
Copy link
It worked. Thanks a lot :)
And for now I guess the size on mobile phones and tablets should be fine.
innisfreehomestead · Member · Nov 30, 2016 at 12:01 am
Copy link
Huzzah! And no worries, happy to be of assistance ^_^
timmogu · Member · Dec 4, 2016 at 9:22 am
Copy link
Hey,
… I do have another question. I added now a picture as the background whih is the skyline of a city in the same color as my menu. I would like that it always looks like as if the city comes out of the menu.

How can I manage it that it always scales correct? No matter if PC, tablet or smartphone. Right now it’s the correct picture.
innisfreehomestead · Member · Dec 5, 2016 at 6:43 pm
Copy link
Hi there,

That sort of thing gets quite a bit trickier, but I can make it a bit better?

If you remove the code I gave you earlier and replace it with this is should show more of the picture:
```
.header-wrapper {
	background-image: url(https://taiwantours.files.wordpress.com/2016/10/skyline_tp2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
}
```
Hope that helps!
Sage
timmogu · Member · Dec 6, 2016 at 9:13 am
Copy link
That helps a bit, but not very much. I could resize the image so it would fit, but the problem is it will look different on every kind of screen with a different resoultion (no matter if PC, tablet or mobile).

Is it somehow possible to make it scale with the page?

Sorry for the trouble… and thanks!
innisfreehomestead · Member · Dec 9, 2016 at 6:59 pm
Copy link
Hey there,

Yeah, sorry, it will change the image depending on the screen. The code I gave does scale with the page, but it might not show the entire image on all screens if that was what you were after. It gets a little tricky with that sort of thing especially without access to the code to put different things in place to ensure sizing etc.

Sorry about that,
Sage

No items found.