When i change screen resolution my whole website falls apart, what can i do?

Question

Whenever i use an older macbook or computer my website falls apart, the margins and the background-image just is trash. I know that the problem lays with my background-image but i really want to keep those elements and i dont see another way of putting these in. I cant find a way to put them in with CSS.

Ive already tried seperating the background images and other elements and adding them in via css but that is out of my league.

.index-background{
    background-image: url("../assets/img/index-background-3.svg");
    background-repeat: no-repeat;
    height: 425rem;
    width: 192rem;
}

I want my website to look good on any resolution

Answer 1

@media is going to be your friend here. With this you can target different resolutions.

@media only screen and (min-width : 768px) and (max-width : 1024px) {
.index-background{ height: HEIGHTTHATWORKS FOR THESE RANGES;
width: WIDTHTHATWORKS; }}

The above will change the height and width of index-background if the browser width is equal to or between 768px and 1024px.

You can also check this out... https://www.w3schools.com/cssref/css3_pr_background.asp. It will show you the different ways you can change the background to fill the area the way you need it to be filled.