Background images work with the aspect ratio of the screen, which is why it’s usually best to float text on top of the image, and make it so the image can be cut off without affecting the design.
You can force the image to be 100% width on mobile, but you might end up with empty space near the bottom of the screen:
@media (max-width: 768px) {
.generate-content-header {
background-size: 100% auto;
}
}
I would suggest removing the text from the image, and adding it into the page header content area instead.