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

Posted by Richard Nicholls
Richard Nicholls
1,301 Points

background image in my header problem

Hi people, I am very much still a beginner and I am practicing web design by building a site for my girlfriends childminding business (and on the web design track here). I want to set the background of the header to an image but I want a h1 and nav to be in front of them. The image is already wide and not very high. I tried adding it to the html but it didnt work properly so I added it to the main css stylesheet and it displayed but I was unable to style it to the dimensions that I needed. I know it is probably a simple fix but I am stuck

3 Answers

Olga Kireeva
Olga Kireeva
9,609 Points
Olga Kireeva
Olga Kireeva
9,609 Points

Hi Richard, it would be easier to answer your question seeing your code. Have you tried background-size property to resize the dimensions of the background image? You can check it here: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi, Richard! That's awesome that you're designing your girlfriend's work website! As for your HTML and CSS, do you think you could post it here (if you don't know how to format it, just copy and paste and I can reformat it for you) so that we can take a look? Or even a link to the site (if it's live right now). That way, we can better diagnose what's going on and help you fix it! :)

Richard Nicholls
Richard Nicholls
1,301 Points
Richard Nicholls
Richard Nicholls
1,301 Points

Hi guys site is not live yet, Olga, this has worked great but now I need to make the image responsive. I have media queries so working that out now. Thank you both for helping

Olga Kireeva
Olga Kireeva
9,609 Points
Olga Kireeva
Olga Kireeva
9,609 Points

In order to make the background-image responsive try to play with contain and cover values of background-size property.