 An Original Stretched Background For Your Website, Optimized And Coded!, Beginner |
  |
  Jun 20 2006, 06:00 AM
Post
#1
|
|
 insert coin  Group: Main Team
Posts: 5,344 Joined: 24-May 04 From: Maastricht Member No.: 35   |
Ever wanted to spice up your website just that little notch? Do you want to simulate a full stretched background but care for fast-loading pages as well?! Here's a way to be both original and graphical, while keeping filesize in mind!
This is the image we will create:  For this tutorial, I am using the following image, a photo by markmiller. Thank you Mark! 1. Log in or register at SXC and open the full size image in photoshop. 2. Select the magic wand tool, set its value to 100 and click the sky. Press delete to clear it. I had to click twice with my Magic wand tool to get rid of all the sky. 3. Resize the image to a height of lets say 500px. (Image -> Image size) 4. Select the eraser tool, and delete the bottom of the rock so it looks like it disappears in a natural way, like this:  5. Enlarge the canvas to a height of 1024px, and a width of 800px (that last one doesnt really matter)  6. Create a new layer beneath the photo and select the gradient tool ('G'). Select the following two colours by clicking the palette at the top:   Now drag a straight line from bottom to top. And voila, your final image is there! Coding this image for use in a website 7. Make a selection of the rockclimbing scene, and select File -> Save for web. You now have an image with the rock climbing scene. link to image On your website however, you want to spread the gradient across the entire site. Therefore, we need 1 more image. 8. Select the Single Colum Marquee Tool  Click the right side of the image so a full gradient is selected. Copy the selection and load it into a new file. Again, File -> Save for Web and you're done! link to image 9. Now for the stylesheet you can use the following code. In the body part, we're loading the linear gradient image, and we will place it at the top and repeat it on the x-axis (from left to right). The container will load the rock-image, and contains the rest of the site. You could for exmaple add text or whatever CODE body { background: #7CB0DF url('images/background-line.jpg') repeat-x top; margin:0; padding:0; } #container { background: url('images/background-rocks.jpg') no-repeat top; margin:0; padding:0; width:760px; height: 800px; } Now all thats left is for you to add your site's content and you're done! A sample page will look like this: Rock Climbing You can also think of an underwater scene with a coral reef, tree branches, anything! This works for a lot of images, and really adds something to your layout. Good luck! 
|
  
|
|
|
Jun 20 2006, 06:42 AM
Post
#2
|
|
 Merry KissMoose Group: Main Team
Posts: 15,990 Joined: 18-May 04 From: North Pole Member No.: 2  |
Very nice Rick and nice choice of images too.
|
|
|
|
|
Jun 20 2006, 07:05 AM
Post
#3
|
|
 Tom  Group: *Premier*
Posts: 539 Joined: 17-August 05 From: Boston, MA Member No.: 6,237  |
Cool, I am going to bookmark this. Realy like the end result.
|
|
|
|
|
Jun 20 2006, 07:56 AM
Post
#4
|
|
 Addicted Dot Group: Moderator
Posts: 15,965 Joined: 26-September 04 Member No.: 763  |
Awesome tutorial there Red. Thanks for adding!
|
|
|
|
|
Jun 20 2006, 08:39 AM
Post
#5
|
|
 Moderator Group: Moderator
Posts: 801 Joined: 12-January 06 From: Spain Member No.: 8,938  |
Great tutorial Red, love the result.
Thanks 
|
|
|
|
|
Dec 22 2006, 11:28 AM
Post
#6
|
|
 New Member  Group: Member
Posts: 16 Joined: 22-December 06 Member No.: 14,239 |
I am truly sorry for bumping an old topic like this, but I seriously need help.
How can I add text and what is the code for it? I know Photoshop very well and I'd like your help. Thanks, and sorry again. |
|
|
|
|
Dec 22 2006, 01:00 PM
Post
#7
|
|
|
insert coin Group: Main Team
Posts: 5,344 Joined: 24-May 04 From: Maastricht Member No.: 35 |
No problem! We're here to help
 It's done in the html code, click http://www.13dots.com/reddragon/rockclimbing/index.html and view the source code If you have any other questions feel free to post them! |
|
|
|
|
Dec 23 2006, 06:50 PM
Post
#8
|
|
|
New Member Group: Member
Posts: 16 Joined: 22-December 06 Member No.: 14,239 |
Thank you so much!
|
|
|
|
|
Dec 29 2006, 01:08 PM
Post
#9
|
|
|
New Member Group: Member
Posts: 16 Joined: 22-December 06 Member No.: 14,239 |
Sorry for double-posting..
but I have a quick question: when I look for the site I made, it doesn't show anything. Only the colour background + the text.. Here is the code if you can find any mistakes: CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <meta name="generator" content="www.leafdesigns.dx-t.net" /> <title>leafdesigns :: the place where ART is at its finest</title> <style type="text/css"> <!-- body { background: #80a147 url('http://www.leafdesigns.dx-t.net/images/background-gradient.jpg') repeat-x top; margin:0; padding:0; font-family: Arial, Tahoma, Verdana, san-serif; } #container { background: url('http://www.leafdesigns.dx-t.net/images/background-leaf.jpg') no-repeat top left; margin:0; padding:0; width:760px; height: 800px; text-align: right; } h1 { color: #000; font-size: 50px; padding: 120px 0 0 0; margin: 0; font-weight: bold; } h2 { color: #333; font-size: 20px; margin: 0; padding: 0; font-weight: bold; } p { color: #333; font-size: 11px; padding: 50px 0 0 400px; margin: 0; } --> </style> </head> <body> <div id="container"> <h1>LEAFDESIGNS</h1> <h2>the place where ART is at its finest</h2> <p>What is leafdesigns? </p> </div> </body> </html> |
|
|
|
|
Jan 1 2007, 02:55 AM
Post
#10
|
|
|
insert coin Group: Main Team
Posts: 5,344 Joined: 24-May 04 From: Maastricht Member No.: 35 |
please post your url
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 29th July 2010 - 11:00 PM |