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 erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

texture question!

Hello, I have a transparent texture, that i want to apply so its over my background image, but i cant figure out how to fix it, heres my code for the background

body {
    height: 100%;
    background: hsl(188, 74% , 21%); url("img/texture.png");
    background: -webkit-linear-gradient(#0e535d , #8ce1ee);
    background: -moz-linear-gradient(#0e535d , #8ce1ee);
    background: -ms-linear-gradient(#0e535d , #8ce1ee);
    background: -o-linear-gradient(#0e535d , #8ce1ee);
    background: linear-gradient(#0e535d , #8ce1ee);
    color: #FFFFFF;
    line-height: 1.6;
}

1 Answer

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Hey,

Add this to your CSS:

html {
  height: 100%;
}
Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Also add a margin: 0; to the body. This will remove that line from the bottom of the page.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

When i add height: 100%; to my html, my header spans across half of the page,

and teh margin: 0; does not change anything

what line is at the bottom of the page?

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Could you provide your full code?

To see what I'm talking about, comment out margin: 0; and scroll down here: http://codepen.io/anon/pen/LELrNr

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

the bottom border is set at the bottom by me,

and by using the first code snippet, i posted , shouldnt the texture background work?

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Sorry! I didn't notice that your backgrounds aren't defined properly. You have to include both the image and the gradient on the fallback backgrounds too. When adding multiple backgrounds top layer comes first, bottom layer goes to the end. Also, they should be separated by a comma, not semicolon. Like this:

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background: url("img/texture.png"), hsl(188, 74% , 21%);
  background: url("img/texture.png"), -webkit-linear-gradient(#0e535d , #8ce1ee);
  background: url("img/texture.png"), -moz-linear-gradient(#0e535d , #8ce1ee);
  background: url("img/texture.png"), -ms-linear-gradient(#0e535d , #8ce1ee);
  background: url("img/texture.png"), -o-linear-gradient(#0e535d , #8ce1ee);
  background: url("img/texture.png"), linear-gradient(#0e535d , #8ce1ee);
  color: #FFFFFF;
  line-height: 1.6;
}
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

the texture still doesn't show up, i downloaded a texture from here http://www.transparenttextures.com/ (the Asfalt one)

and i put the transparent texture inside my img folder, but it still wont display

// erdrag

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

It should be alright now because it works for me: http://codepen.io/anon/pen/EaXRvQ

What you can do:

  • Double-check the file path
  • Delete the cache in your browser
  • Try it in another browsers
Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Is your "img" folder on the same level as your CSS file?

If not, you will have to use another path that is relative to your CSS file. For instance, it's a common way to have an "img" and a "css" folder in the root. In that case, you would use this path: "../img/texture.png" – the double-dot notation goes back to the parent folder.

Hope this helps.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

it works when i use the url to the transparent site, but not when i use the url to my img folder, hmm thats wierd,

well thanks for helping ! :D

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

yeah the double-dot notation fixed it!

now i have to find a cool texture to add :D

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

I'm glad I could help, good luck!