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

stephanie harrison roberts
stephanie harrison roberts
1,713 Points

help with CSS backgrounds

Hi All! I'm trying to get to grips with adding background images to my site, and cant seem to be able to make the image cover the whole page and scale, no matter what size the browser. Anyone point me in the right direction?

Thank you :)

<!DOCTYPE html>
<html>
    <title>Coding Mama</title>
    <link rel="stylesheet" href="New.css">
    <body>
        <img src="Brackets_Images/redgrafitti.jpg" alt="full page image of red grafitti" class="red_grafitti">
    </body>

</html>

```Css```
.red_grafitti {
background-size: cover;
background-repeat: no-repeat;
height:100%;
width: 100%;
margin: -10px ;

}

7 Answers

You were missing the background-position property which is what is centering the image

For background images, you add them to your stylesheet not the html. So you would target the container in the html that you want the image to display in and then insert the url to the image in the css.

For example if I want my body to have a background image I would do...

body{
        background-image: url("https://picsum.photos/1600/1600/?random");
    }
stephanie harrison roberts
stephanie harrison roberts
1,713 Points

ok great, thank yo for your reply. So i've changed that and it works.....except that now when I make the browser bigger, the image doesn't centre as I (hope) Ive asked it to, there is a l;arger margin on one side? this seems to go when I remove the height 100%, then the image centres, but i need it to centre AND be 100% height! Any thoughts?

Thanks alot!!

<!DOCTYPE html>
<html>
    <title>Coding Mama</title>
    <link rel="stylesheet" href="New.css">
    <body>

    </body>

</html>

```CSS
html
{
  background: url(Brackets_Images/lights.jpg) no-repeat;
  background-size: cover;
  height: 100%;
  max-width: 900px;
  margin: 0 auto;
}

Do you want the image to be 100% or just so that is covers the entire screen?

stephanie harrison roberts
stephanie harrison roberts
1,713 Points

Hi Deebird!

I would like it to cover the whole screen until it gets to a max of 900px, and then stop getting wider then, but still have the height at 100% if that makes sense!

Steph

If I understand correctly you want something like this...

html{
          background: url(https://picsum.photos/1600/1600) no-repeat;
          height:100%;
          max-width: 900px;
          background-size: cover;
          background-position: 50% 50%;
          margin: 0 auto;
        }
stephanie harrison roberts
stephanie harrison roberts
1,713 Points

Yes, the seems to work fine, you've saved me a headache this evening, so thank you so much! Out of interest, where was I going wrong?

stephanie harrison roberts
stephanie harrison roberts
1,713 Points

right got it, I thought it was the margin: 0 auto; that was doing it. Thanks again, you're a star! x