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

Design

Sam Fitz
Sam Fitz
7,036 Points
Posted by Sam Fitz
Sam Fitz
7,036 Points

Is there a course on creating large background images for sites?

Here is a site that shows what I mean to help clarify the question in my title: http://www.madeinnewcastle.co.uk/

I've been interested in related questions for some time, such as...

1) What dimensions are best to use for a large background image for a site?

2) What HTML and CSS techniques are best used to overlay content on top of the images as seen in the link above?

3) What are the best techniques to minimize file size and load time when creating such an image in Photoshop?

4) What is a good target file size to aim for so that most users to get reasonable load times whilst still retaining a quality, crisp look?

5) What is the best method for creating a background image that spans both the entire height and width of most viewports, and remains fixed regardless of scrolling and what content lays on top of it?

If there is a course (or other website) that covers some of above topics, I'd love to be directed to it. If there is not, I would like to kindly request that a course be developed on everything above. Surely I'm not the only Treehouse-r who would like to take a course on this subject rather than scour the web and learn through painstaking trial and error.

Thanks in advance for reading and responding! -Sam

3 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Sam,

  1. The higher quality of the image the better, when its set as background image it will appear as a full background for all screen sizes, although it would be better to use a smaller size file for smaller screen sizes using media queries to make loading faster.
  2. Just your normal html and css is all thats used to add content to the page.
  3. As I said in answer to question 1 its best to have smaller images available to smaller screens to help refuse load times.
  4. The larger the size the slower it loads, but with broadband speeds we have now its not such a huge issue as it once was, you have to balance quality of image with load times, you can use the developer tools within Chrome to see load times if its a concern.
  5. There are so many viewport sizes these days it really is better to use smaller to larger images via media queries to build your site, and use css to fix the background.

The Treehouse course on Photoshop would be a good course to take.

P.S you couldn't of chosen a better image in your link, home sweet home :)

Sam Fitz
Sam Fitz
7,036 Points
Sam Fitz
Sam Fitz
7,036 Points

Thanks for the thorough reply, Wayne!

I found a 1920 x 1200 px background image for a site I'm designing for a friend that I like. It was around 1mb, and I was able to get it down to around 100kb - while retaining most of the quality - just by re-saving in the Photoshop Elements that came with my new laptop. So I'm pretty happy with that.

One thing I'm not sure about is where I should put break points for smaller images. I imagine its common practice to have a different media query and background image for each general type of viewer: mobile, tablet and desktop. But I don't know what the best practice is for what size ranges to implement via media queries, and what sizes to make the accompanying images.

So far I'm just designing for my own HD desktop size, keeping the size of the background at its original dimensions. I'm using the following CSS code to make it display:

body { background-image: url("../images/background_design.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; }

Does that look about right? Any recommendations for changes?

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Sam,

Some of us were just having that exact conversation about viewport sizes and media queries Here on another forum post you can take a look on my thoughts and the thoughts of a few others as well as a few links showing just how many screen sizes that are out there.