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 Alex Chamberlain
Alex Chamberlain
5,706 Points

Background image not positioned correctly

Hi everyone,

Am trying to position my svg image to the corner of the screen. I have tried to add the background-position: top left; property but it didn't work. I have included my code and a picture of how it looks in my browser. I am still trying to figure out what is the problem.

https://imgur.com/a/nnO7WRY

.div1{
    background-image: url(../images/back.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top left;
    height: 100vh;
}

    <div class='container'>
        <div class='div1'>
            p
        </div>
        <div class='div2'>
            p
        </div>
    </div>

Thanks!

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

It seems to me to be a sizing issue, but without knowing the size of the SVG as well as the size or proportion of the screen you want the SVG to display it's difficult to give a definitive answer.

Have you tried removing the background-size and height properties or adjusting those values?

2 Answers

Alex Chamberlain
Alex Chamberlain
5,706 Points

I just tried it, it didn't work it showed the same result

Mister Moody
Mister Moody
48,333 Points
Mister Moody
Mister Moody
48,333 Points

The background-size: cover; property is gold for background images. Scary that that didn't work for you; possibly an issue with inheritance/specificity(?). Perhaps you can use the top: value; and left: value; property for positioning the image, where the value of top: xx; is 0... tinker with the left value and use vw unit for responsiveness.