I’ve always been fascinated by these large backgrounds you sometimes find on movie websites. They can be a real eye catcher. But the problem most people tend to ignore are to make the contour of their image the same colour as their background. A bad example would be like this:
Another problem that frequently occurs is that the image is too width. Statictics shows that most people are still using 1024*768
| Date | Higher | 1024×768 | 800×600 | 640×480 | Unknown |
| January 2008 | 38% | 48% | 8% | 0% | 6% |
| January 2007 | 26% | 54% | 14% | 0% | 6% |
| January 2006 | 17% | 57% | 20% | 0% | 6% |
| January 2005 | 12% | 53% | 30% | 0% | 5% |
| January 2004 | 10% | 47% | 37% | 1% | 5% |
| January 2003 | 6% | 40% | 47% | 2% | 5% |
| January 2002 | 6% | 34% | 52% | 3% | 5% |
| January 2001 | 5% | 29% | 55% | 6% | 5% |
| January 2000 | 4% | 25% | 56% | 11% | 4% |
these statistics come from w3school
So try to use images that are less then 1024*768 or at least, if it’s a person, doesn’t cut his body in two. You can still use a repeated background to fix a gradient or any other missing image.
So let’s get started. Are you a fan of watching films? Or maybe trailers of upcoming low-budget movies. Well follow my steps.
BACKGROUND
1. First of open photoshop and make a new document. For now we dont need to worry about the resolution cause we’ll fix the outcome at the end. In my case (as I’m using a widescreen) I usually use 1680×1050 pixels when creating backgrounds or wallpapers.
Before we go any further, let me explain you something. The finished project will look like this:
To get such a curtain effect, we need verticle lines and level adjustments,
to get the verticle lines, we need noise and motion blur and fibers
to get the noise go to step 2, hehe.
2. Fill the layer with black and go to Filter > Noise > Add Noise. Use following configuration:
3. Working with motion blur with too many white dots, would mess up the curtain effect. This is why we are going to lower the amount of dots. This is done by level adjustments. Go to Image > Adjustments > Levels change the values as followed:
You can always change these values for other result. Test em out I’d say.
4. Create a new layer and fill it with white. Make sure the new layer is on top. For easier use, you can always rename your layers.
5. The next step will get you closer to getting a curtain effect. Go to Filter > Render > Fibers and set the values as in the picture:
6. I know, this looks like a bark of a tree. Be patient we are almost there. For a better highlighting effect go to Filter > Artistic > Plastic Wrap. Now the most important part motion blur. The long awaited time has come (just kidding). Go to Filter > Blur > Motion Blur and use the values as followed:
7. Almost there, now we want the darker areas to be darker, same with the opposite. We’ll use the same procedure as before. Go to Image > Adjustments > Levels and use these values:
8. For the colors go to Layer > Layer Style > Color Overlay (or double click on the layer) and use #a70000 as color or any other color you like.
9. Now go to Gradient Overlay in the same window (Layer > Layer Style > Gradient Overlay) and set these values:
As stated before, we’ll need to pay attention to the fact people might have other resolutions then yourself. This is why I used a scale of 90%, this will make sure that curtain is entirely visible on resolutions with 1024*768 or above.
10. Last step would be to make the curtain less jagged. So let’s smooth it by using gaussian blur, go to Filter > Blur > Gaussian Blur:
Yet again the final result:
be sure to crop it (black leftovers) to lower the size of the image and save it as jpg.
CODING
Let’s continue with the coding.
Here you have the CSS:
body { padding: 0; margin: 0; background: #000000 url("background.jpg") no-repeat center top; width: 100%; height: 100%; display: table; } #container { text-align: center; } #title { color: #ffffff; height: 25px; margin: 25 auto; } #frame { margin: 325 auto; height: 300px; width: 500px; background-color: #fff; } |
'background: #000000 url("background.jpg") no-repeat center top;'
This is actually your main identification. this is the shorter version of
background-color: #000000; background-image: url("style.css"); background-repeat: no-repeat; background-position: center top; |
The height of the body is quite important in this test, cause else you wont get any image. Cause I’ve sent my article to a friend, he tried the procedures but failed getting any image in Firefox. Well that’s why you need to set the minimum height in CSS. The ‘text-align: center;’ is to get the frame in the center in Internet Explorer. In Firefox we use ‘margin: auto’.
I guess the rest of the code speaks for itself. If you have any problems understanding this code, do comment on this article. i’ll be glad to help you out.
And here you have the HTML:
<html> <head> <title>Large Background</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <div id="title"> <h1>Movie Trailer</h1> </div> <div id="frame"> </div> </div> </body> </html> |
With the frame made, you can setup any playing video in it.
If by any chance you need two background images (clouds and blue gradient color) you can set one image to the html background and the other to the body.
Well this is it. I hope you enjoyed the tutorial. If you have any questions or remarks, do comment on this article.
good work, thank you
Your welcome, glad you liked it
[...] Vote Using a large background using css [...]
Added to http://www.psaddict.com
You should submit this to tutorial sites and get yourself even more traffic.
I have already submitted it to two tutorial websites. But will search for some other great submitting sites.
thanks for the tip Daniel
very nice this tutorial
didnt you forget about something between steps 7, 8 and 9? Color overlay causes that whole picture becomes red!
My question is, how do you code the HTML and CSS?