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 Eliot Winchell
Eliot Winchell
8,341 Points

Unable to set a repeating background image

Hi there, I'm having a really simple problem that's dazed me with confusion for the past hour. I have a background pattern image that's called pattern.png and I can't set it as the background image in the css?

css: html { background-image: url('img/pattern.png'); }

I've tried changing the image destination, looked at over 10 websites with the same working method, and more. What am I doing wrong that's probably so simple? Thanks, Eliot

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Is your css in a css folder?

The path to your image is relative to where the css file is. So if you have a "css" folder and an "img" folder then you have to go up one level first and then go down into the "img" folder. url('../img/pattern.png')

Let us know your file/folder structure if this is not what you have.

Eliot Winchell
Eliot Winchell
8,341 Points
Eliot Winchell
Eliot Winchell
8,341 Points

I uploaded the background pattern to imgur and used a direct link to that which worked but what if that link goes down?

Brian Goldstein
Brian Goldstein
19,419 Points
Brian Goldstein
Brian Goldstein
19,419 Points

Jason is spot on. For images, hosting is always an issue and the practice we use is to host images on the same site as where they will be displayed, rather than relying on another site. For WP sites, images that are a part of the theme itself, say, the company logo, go into wp-content/images. All other ones, like product or post images, get uploaded via Wordpress' media library tools (analogous to how one CAN build out a nav menu in template by hard-code, or they can just use WP menus). If we have to dynamically call the image using advanced custom fields, we will select Image URL for that purpose.

For static sites we typically have images just off the main directory, but not inside the css folder (because it's usually a normalize.css, style.css, and maybe 1-2 other files depending on the functionality). so if you're looking at the root for a static landing page, there's usually 

+js
+css
+images
+index.html

i prefer spelling out images so I don't get it confused with the img tag.