Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by amseroedd da
amseroedd da
11,021 Points

How to make a background svg image keep its position in larger screens?

Hello everyone!

I have been struggling with this for a while now and I hope someone could help me with this. I have a svg background image that i want to cover the upper half of my page . The css is as follows:

body {
background-image: url(../img/randomimage.svg);
background-repeat: no-repeat;
background-position:50% 160%;
background-size:90%;
height:100%;
margin:0 auto;
}

Everything looks good on my resolution however when I zoom out and test the website on bigger screens, the picture ends up covering the entire screen.

I tried using media queries but I think that I would need 20 of them in order to make it look good on all screens.

What other solutions do you suggest?

Thank you very much !

1 Answer

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Amseroedd,

Can you try this and see if it works for you.

    background-attachment: fixed;
amseroedd da
amseroedd da
11,021 Points

Hey Wayne,

That solution did not work. It only allowed the background image to stay on the screen when scrolling down , but on larger screens the problem remained the same.

I did find I solution though:

Instead of using the background image for the entire body, I used it as a background image for the header.

My final css looks something like this.

body {
height:100%;
margin:0;
}

header {
background-image:url(../img/randomimage.svg);
background-repeat:no-repeat;
background-size:90%;
background-position: center bottom;
width:100%;
margin:0 auto;
height:500px;
}

I am still on the path of figuring how these basic things work like. Thank you very much for your help!

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Sorry Amseroedd,

I thought thats what you were looking for.

I had a similar conversation earlier on, you could also try some of these options.

images on page