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 How to Make a Website Beginning HTML and CSS Follow Along with Workspaces

Posted by stephanielong
stephanielong
112 Points

Hello, i would like to know how to insert a css code for a background image into a template i am working on. Thanks

in the meantime, until i finish the course and learn to build my own website, I now am using a "template" on squarespace and want to change the background image only for each page. I need to insert a css code. Thats all i really want to change for now. Can you help me with this?Thank you very much . Stephanie

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Stephanie,

I'm not familiar with squarespace but I found this page which may help you: http://help.squarespace.com/guides/using-the-css-editor

Can you specify which template you're using? You might be able to get more direct help that way.

Does the template already have a background image in place but it's the same one on every page?

Do you have this live where we can view it?

5 Answers

Philip G
Philip G
14,600 Points
Philip G
Philip G
14,600 Points

Hi Stephanie, the code for inserting a CSS BG image is 

background: url("pic.png");

Of course you'll have to change the url. Is that what you wanted? If not, please write me. Much luck with your template! :)

Philip

stephanielong
stephanielong
112 Points

Thanks so much for the reply. Need a bit more clarification. Squarespace told me" So in order for separate pages to have custom backgrounds you would have to use custom css. If you have coding knowledge, you can write the CSS for this and add it to your style sheet using the CSS button at the bottom of your Style Editor (paintbrush icon). " I have been able to access the style editor but do you think its possible to have a different background image for each page? There is only one style editor. How would i be able to specify which page i would like the new background image for? sorry if i am confusing. i am a true beginner i know! thanks so much for the advice! Stephanie

Philip G
Philip G
14,600 Points

Hi Stephanie, can you access the HTML or can you insert a JavaScript code? Then you can have a custom IMG for every page. Can you give us a link? That would make helping easier.

stephanielong
stephanielong
112 Points

Hello again. Here is the link of the site i am working on. It appears i can accrss the "css editor " on each of the pages. I would like to have different backrounds / one for the blog/ the store/ my story etc. https://stephanie-long-um1h.squarespace.com Now the backround is white but after i would like to add images for each backround of possible. Thanks again- stephanie

Philip G
Philip G
14,600 Points

Please look at my new answer

Philip G
Philip G
14,600 Points
Philip G
Philip G
14,600 Points

According to this each page has its own settings. There, at header code injection you can customize the picture. e.g. :

body {

background: url("your-img.png");

}

If this doesn't work, try this:

body {

background: url("your-img.png") !important;

}

If you have any questions, please write back.

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Stephanie,

If for example you would like the background image to appear on your body tag the CSS would look like this:

body{
background-image: url("/img/image-name.jpg");
background-position: center center;
background-repeat: no-repeat;
}

Please note the background-image url would be the path to your image and you can position/repeat the background as required.

The example above is saying that the background image image-name.jpg located in the img folder will be centered horizontally and vertically on the body tag and there will be no repeat.

The shorthand version of the above can be written as:

body{background-image: url("/img/image-name.jpg") no-repeat center center;}

UPDATE The way to identify each page would be with an ID or a class on the body or page div.

An ID can be used once per page whereas a class can be used multiple times.

body in the stylesheet would then be replaced with either #myID when referencing an ID or .myClass for a class (where myID and myClass are what you define per page).

If you aren't already going through this I would recommend following the Web Design track for the basics as it will prove very useful and will definitely clear things up.

Hope that helps.

Thanks

-Rich

stephanielong
stephanielong
112 Points

Hi Rich, Thank you as well. Getting a bit clearer when i read what you wrote. Would "body" mean... the name of each page? So before {background image i need to put the title of each of my "pages" of the template? Thanks again for your time! Stephanie

Rich Bagley
Rich Bagley
25,869 Points

Hi Stephanie,

No problem. Just updated my answer above with a little more information that should hopefully help.

Thanks

-Rich

udslwxmrlw
udslwxmrlw
8,196 Points
udslwxmrlw
udslwxmrlw
8,196 Points

Hi Stephanie!

If you want to give each page a different Background Image, you could give the body tag <body class="example_name"> of each page its own class or ID. Each page would have a different class or ID assigned to the body.

Example for your first HTML Page:

<body class="example_background_01">

Example for your second HTML Page:

<body class="example_background_02">

Example for your third HTML Page:

<body class="example_background_03">

The CSS would look like this:

.example_background_01 {
    background-image: url('img/example.jpg') center center no-repeat;
}

.example_background_02 {
    background-image: url('img/example_02.jpg') center center no-repeat;
}

.example_background_03 {
    background-image: url('img/example_03.jpg') center center no-repeat;
}
Anna Steirer
Anna Steirer
6,734 Points
Anna Steirer
Anna Steirer
6,734 Points

Hi Stephanie, I use Squarespace too and was unaware you could customize their templates to that degree. Your question and all the answers were very helpful. I am going to try to customize my own website.