Hi to all,

I'm new here and I will make a presentation topic soon...

 

I work as web designer from year and I want a completely new portfolio based on HTML5 + CSS3 and jQuery...

So I'm trying to study hard for this...

 

Look at this site

 

http://hellocarbon.ca/

 

This portfolio is made with HTML5...and it has multiple background for each section...

I'd like to make a single page layout but I'd like to have this effect...a background for each part of the site...that appear one under the other, just like the site I've shown you...

 

I read that CSS3 can handle multiple background but I don't really know how to do it and what size I have to use for my background images...

 

Thanks to all in advance...I hope to help some of you you I can...

And sorry for my bad english

It is just a series of boxes stacked on top of each other. Each with a different background image.

Try this as an experiment:

 

<!doctype html> 
<html>
<head>
<style>
.box1, .box2, .box3 {
  width:960px;
  height:300px;
  margin: 0 auto;
}

.box1 {
  background-color:red;
}

.box2 {
  background-color:blue;
}

.box3 {
  background-color:green;
}

</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

 

That's the general principal behind this.

 

The height in the css is just there as an example.

You'd have some content within each div, like the site you linked.

 

Replace the background-color with a background image and there you have it - simples!

Edited August 2, 201115 yr by bb_matt

Simply this!!!!!????

Oh my....I was stuck for this stupid thing...I thought that was harder -.-

Thanks guy I try it now and I let you know

Nice Website

yeah really nice and your advice works perfectly