Q:

How to have a responsive header background with aditional CSS for my theme?

I am building my first WordPress website via the Blossom Pin Pro theme and the my background image of the header disappears when the window width.
Here is the address of the site
If you could write me a code that I can add to the "CSS additional" section of my theme to solve the problem it would be great thank you!
I went through several similar posts and tried different codes, the problem is that I am a beginner in CSS and I can not identify the relevant variables to adjust the code to my site.

A:

Try this:
@media only screen and (max-width: 1024px) {
.mobile-header .mobile-site-header {
background-image: url(https://odetomytravels.com/wp-content/uploads/2019/10/Header-2_1.gif);
background-size: cover !important;
background-position: center;
} }

