Different Header Background for laptop/mobile

Software Support
1

Hello
I’m wondering if there is a way that I can set different header background for mobile(small Screen) devices.
I mean having two backgrounds for the site one for Regular screen and the other one for small screen .

I really tried every Css code but the background I designed is just too large for the small screen width.

Thanks for any help in advance

2

I found a working solution, and Im posting it here just in case somebody needed it in future
you need to edit the header.less in the style folder of your theme
look for the
header{
}
and modify it , below are different screen sizes

Blockquote @media (min-width: 320px) { /* smartphones, iPhone, portrait 480x320 phones / }
@media (min-width: 481px) { / portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. / }
@media (min-width: 641px) { / portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones / }
@media (min-width: 961px) { / tablet, landscape iPad, lo-res laptops ands desktops / }
@media (min-width: 1025px) { / big landscape tablets, laptops, and desktops / }
@media (min-width: 1281px) { / hi-res laptops and desktops */ }

so the final header would look like the code below after u modified it

Blockquote header {
@media (min-width: 320px) {
background-image: url(“your bg image url”);
background-repeat: no-repeat;
background-position: relative;
background-size: 100% auto;
}