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

Debby Beachy
PLUS
Debby Beachy
Courses Plus Student 2,096 Points
Posted by Debby Beachy
Debby Beachy
Courses Plus Student 2,096 Points

Need a video tutorial, content centered, but backgrounds stretches full width.

I'm wanting to watch a video tutorial on how to code a simple website where the is horizontal background colors and images are the full width of the view-port used, but the content is centered within a 960 grind. The website will scroll when the navigation links are clicked.

I'm not sure how to use a <div id=wrapper> tag for my content but have the background divided up 100% width in sections with images or colors. I'm not wanting a flexible layout my template is a 960 grid.

If there is a tutorial in the library that will help me understand this, that would be great. If not do you have some tips and tricks? Thanks tons

2 Answers

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

I don't have a specific tutorial gathering all of your queries in mind. But what you are requesting is a simple one-page website isn't it ? If you search on the internet I'm pretty sure you'll find plenty of tutorials.

Anyway, I can try to help you with this, if I've understood your requests correctly.

About your backgrounds images: Basically, what you'll need is obviously some CSS to achieve what you want. To me the first property I would use to achieve such a result is the background-size property with a value of cover. You can have more information about that looking at the video tutorial in the CSS foundation, there is a tab focusing on the background property.

More information here: http://teamtreehouse.com/library/css-foundations.

About the scrolling effect: You could use Jquery, if you don't want the default behavior of anchors which is quite straighforward.

Once again, there are tutorials about Jquery in the Javascript section but I'm not sure about something explaining how to do that. This isn't complicated once we know how to handle a little bit jquery though.

Lastly to help you a little bit with this, to have a better idea, I've just created a codepen with things you are requesting. At least what I've understood...

This means, 960px content, with background color & colored stripes, and full background-image, not responsive + scroll effect (only applied to HOME & ABOUT link).

Keep as well in mind that the Jquery might probably be optimized, I'm repeating myself with the code, but the purpose was to do it quickly and give you a direction.

Hope it helps a bit.

Here is the link to the code pen test : http://codepen.io/Azuk/pen/vJBEs

Debby Beachy
Debby Beachy
Courses Plus Student 2,096 Points
Debby Beachy
Debby Beachy
Courses Plus Student 2,096 Points

Geoffrey, This has helped a lot and you did understand my question perfectly, The sample you gave me on Codepen was great. After thinking about it some more I have another question. Can I use jQuery to add the background colors, and images thus saving all the Markup in my HTML? My website has eleven sections, I love to keep my code as clean as possible and only use divs IF there is no other way to get the design to look the way I want it to. I can then style the backgrounds using CSS.

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Glad it helped a bit. Which markups would you like to save ? Otherwise, yes you can edit css properties using jquery. And so, change the color using jquery.

Here is the link : http://api.jquery.com/css/

However, I'm not sure It's good practice, if ever a visitor has javascript disabled, it won't work, even if It's probably very, or at least uncommon nowadays.

If you don't want to add a specific class for each div, to put a specific background-image. You can use CSS3 selector as I did in the exemple.

Here a quick exemple:

/*shared properties between each wrapper here*/
.wrapper{

  background-size:cover;
  background-position:0px -100px  
  border-bottom: 80px solid;
}

/* select the first div with a class of 'wrapper' met in the dom */

.wrapper:first-of-type{

  background-image: url(http://www.myphotogallery.name/stany/20120630-macro_DSC_0140-1024px.jpg);
  border-color: #ff0000;


}

/* select the second.....*/

.wrapper:nth-of-type(2){
  background-image: url(http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-04.jpg);
 border-color: #0000ff;

If ever you don't know yet the advanced selectors, you can have a look in the css foundation course, there is tab named "advanced selectors", there you'll know the way it works and you'll be able to applied your backgrounds easily.

Debby Beachy
Debby Beachy
Courses Plus Student 2,096 Points
Debby Beachy
Debby Beachy
Courses Plus Student 2,096 Points

Okay, thank you for all the advice it has helped me a lot. I did spend time on Google looking for my answers and couldn't find what I was looking for. This is my first time posting to a form and it's been a good experience. I'm sure if someone else come across this posting they will get a lot of benefit too.