You are viewing a single comment's thread.

view the rest of the comments →

0
1

[–] Nurdoidz [S] 0 points 1 points (+1|-0) ago 

Ah, it seems you linked to the imgur page instead of the actual image. The url should have http://i.imgur.com and should end with .png, .jpg, etc. for Imgur. Here's the working adjusted code:

#header {
    background: url(http://i.imgur.com/nKpwSPv.jpg) no-repeat fixed;
    height: 481px;
}

0
2

[–] Xseleon 0 points 2 points (+2|-0) ago 

Alright, thanks for the help!

This was just a test image, but I have noticed it doesn't centre itself on the page. Should I pick a banner that spans the entire width of the page, or can I move it in a certain x direction.

0
3

[–] Nurdoidz [S] 0 points 3 points (+3|-0) ago 

It's good measure to pick a banner or image that's at least 1920-2000 pixels wide, since that would cover most monitors. On top of that, you may want to make the image somehow repeatable or you can blend the image into the background. For example, you can do a simple blur/gradient to black on the edges and make the background black, so it appears that it's fading into the background. Then, you can center the image and not have to worry about repeating the image. To center an image, add center top on the background line:

#header {
    background: url(http://i.imgur.com/nKpwSPv.jpg) no-repeat fixed center top; /* x-pos y-pos : centered on the horizontal x-plane, top-aligned on the vertical y-plane */
    height: 481px;
}