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 trialamseroedd da
11,021 PointsHow 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
19,579 PointsHi Amseroedd,
Can you try this and see if it works for you.
background-attachment: fixed;
amseroedd da
11,021 Pointsamseroedd da
11,021 PointsHey 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.
I am still on the path of figuring how these basic things work like. Thank you very much for your help!
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsSorry 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