Header Image not responsive

Hello Michael,

are you familiar with CSS?
There is a rule which overrides your background image in theme “easyblog” file “style.css” on line 1312.

@media all and (max-width: 1200px) {
	.dt-header {
		background-image: none !important;
	}
}

Maybe you can create a child theme, copy the Styles and remove this media query?
Hope that helps.

Thanks a lot!!

that solved the disappearing problem!

How can I address now the white background under it when the screen is small. In other words how can I make the navbar to move up when the screen is smaller

Hello.
You can reduce the height of your header or make the background image bigger with “background-size” and align it with “background-position” within a media query, for example:

@media all and (max-width: 900px) {
    /** Your code ... */
}

• This reply was modified 8 years ago by Bernhard.

doesn’t work ??

@media all and (max-width: 900px) {
	.dt-header {
		background-size: auto 100% !important;
		background-position: relative !important;
	}
	.dt-menu-wrap li ul {
		position: relative;
		z-index: 99999;
		top: 0;
		visibility: visible;
		width: 100%;
		max-width: 100%;

		opacity: 1;
		border: 0;
		padding-left: 24px;
	}
}

It doesn’t work either.
What can I do

I’m having the same problem. The header background image does not show in the smaller responsive layouts (tablet & phone). I tried removing the media query mentioned above, but there’s still nothing but a white block at the top.