Full width header error

Question

So I am coding a full width header tumblr theme and while everything's fine as far as the full width, as soon as I resize to a smaller screen, like on a mobile device or tablet, the header cuts off and it's no longer in full width. Example is

I literally tried everything, including resetting the css and I even went through every question on this site that deals with the same issue. I tried those solutions and neither worked so I really don't know what else to do or maybe it's possible there's literally nothing I can do about it as nothing has worked thus far. Here is the full code in case the issue is more than just the header.

.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #eee;
background-image: url('{image:header}');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
{block:PermalinkPage}
display: none;
{/block:PermalinkPage}
}

.topbar {
width: 100%;
height: 80px;
z-index: 220;
background-color: {color:posts};
border-bottom: 1px solid {color:post borders};
border-top: 1px solid {color:post borders};
{block:PermalinkPage}
position: fixed;
top: 0;
{/block:PermalinkPage}
}

`<header class="header"></header>`

Thank you so much

Answer 1

Screen size changes accordingly for every device. Thats why most developers use Bootstrap to avoid such issues.

But for your answer, try this in CSS :

background-image(your url);

background-size cover;