Is there a possibility to when you make a webpage smaller (for example on tablets or phones) the background stretches. So the text is still in de same area as before?
You can make any CSS style you want to be applied only on specific screen size.
<style>
@media screen (min-width:400px){
div {background-position:center} //This style will be applied only to screen larger than 400px
}
</style>
Create the CSS you want for each device, and surround it by the right @media you need.
More Info:
You can test it, without real device, by reszing the window, or using Chrome Inspector Device Emulation
I guess you are looking for :
background-size: contain;
contain
A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.