Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Background color

Status
Not open for further replies.
limejudo

limejudo

Technical User
Aug 4, 2004
110
US
How do you create a different gradient background color for a web page? I know how to do it in PS but how can you apply it to the actual backgroud. example is at this site thank.



Eric - A+, Net+, INet+ CCNA next week.
Network Admin/Helpdesk II
 
Sort by date Sort by votes
Here's the code straight from the page that you linked to:

<BODY background=images/sitebg.jpg>

(sitebg.jpg would be your gradient file in your case)

Just view the page source to study the code.
 
Upvote 0 Downvote
Use CSS for backgrounds:

<body style="background: url('mybackground.jpg');">

Or supply it in the stylesheet itself:

<style type="text/css">
body {
background: url('mybackground.jpg');
}
</style>

Hope this helps!

NATE


mainframe.gif


Got a question? Search G O O G L E first.
 
Upvote 0 Downvote
Well yes I got the part your explaing in the source code. I should have been more clearer. HOw do you make that image in Photoshop? I've looked on the web and I everything pulls up as seamless tile image. How do I make a seamless gradient backgroung. thank

Eric - A+, Net+, INet+ CCNA next week.
Network Admin/Helpdesk II
 
Upvote 0 Downvote
Hi,

All you do is you make a new docuemtn like 500 x 500. Then choose your 2 colors for the gradient. Select the gradient tool and drag from top to bottom while holding shift. Then goto Image > Image Size and change the width to 1px. Save as a jpg image then do the following css to apply it to your site:

body {
background-color: # <--- bottom color of your gradient;
background: url ('background.jpg');
background-postition: top left;
background-repeat: repeat-x;
}

That's it.

Hope this helps!




NATE


mainframe.gif


Got a question? Search G O O G L E first.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

spewn
  • Locked
  • Question
solid color but see through gif...need for drop down menu background
Replies
2
Views
138
Gruuuu
Gruuuu
edmana
  • Locked
  • Question
Color Replacement
Replies
2
Views
116
Gruuuu
Gruuuu
QUES
  • Locked
  • Question
How to remove the image background
Replies
4
Views
171
mscallisto
mscallisto
G0G3tt3r
  • Locked
  • Question
Color scheme help
Replies
4
Views
131
G0G3tt3r
G0G3tt3r
arshzafar
  • Locked
  • Question
to color with two pantone color 2
Replies
6
Views
154
apepp
apepp

Part and Inventory Search

Sponsor

Back
Top