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

stephanie harrison roberts
stephanie harrison roberts
1,713 Points
Posted by 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

deebird
deebird
7,558 Points

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

deebird
deebird
7,558 Points
deebird
deebird
7,558 Points

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
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;
}
deebird
deebird
7,558 Points

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

deebird
deebird
7,558 Points
deebird
deebird
7,558 Points

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