Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,567 Points

Hi Amseroedd,

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

    background-attachment: fixed;

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,567 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