Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › A really dumb novice web question.
New Posts  All Forums:Forum Nav:

A really dumb novice web question.

post #1 of 7
Thread Starter 
It's been a while since I've made a site for fun, since I usually do them for school projects and they're more code-based than actual content base.

I will use that excuse to segue into my question:

What is the appropriate way to use an image as a background for the top of the web page?

To explain what I mean, I want the entire page to be black, with a background color. I have a 2500x400 image that I want to be at the top of the page (it's just like a sort of design I made in photoshop). It ends up blending with the black at the bottom, so once the image ends the rest of the page can just be a background color. Every way I try to do it ends up with it having stupid borders on the side or not being at the exact top.

I know this is a really easy and basic question, I just can't seem to find the search terms to find what I want to know.
    
CPUMotherboardGraphicsRAM
Q6600 @ 3.2 BIOSTAR TForce TP43D2A7 LGA 775 Intel P43 ATX EVGA 8800 GTS SSC 640mb 4g G.Skill 1066 DDR2 (960 MHz @ 5-5-5-15 
Hard DriveOptical DriveOSKeyboard
Hitachi 460g 7200rpm OptiARC CD/DVD Windows XP Professional SP3 Alchemy Elixir 
PowerCaseMouse
XION 630W RAIDMAX Aztec Logitech MX518 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Q6600 @ 3.2 BIOSTAR TForce TP43D2A7 LGA 775 Intel P43 ATX EVGA 8800 GTS SSC 640mb 4g G.Skill 1066 DDR2 (960 MHz @ 5-5-5-15 
Hard DriveOptical DriveOSKeyboard
Hitachi 460g 7200rpm OptiARC CD/DVD Windows XP Professional SP3 Alchemy Elixir 
PowerCaseMouse
XION 630W RAIDMAX Aztec Logitech MX518 
  hide details  
Reply
post #2 of 7
Just remove the borders? I am not sure about your question but maybe it is because I am sick. Do you have a picture or a link to the site? Can you show me the css/html involved?
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
post #3 of 7
Thread Starter 
Quote:
Originally Posted by A-E-I-Owned-You View Post
Just remove the borders? I am not sure about your question but maybe it is because I am sick. Do you have a picture or a link to the site? Can you show me the css/html involved?
I don't have the website hosted, I'm currently just editing htm pages in notepad and testing them in my browser. Currently I have no code. If you want an example of what I'm trying to do, look at this page:

http://www.ndesign-studio.com/

You see how they have that image on the top? After that image, the background just becomes a steady color for however long the page is. That's what I'm after. One image on the tippy-top, blending into a steady background color that remains constant for the rest of the page.

Problem is, I can't anchor it to the top of the page when I do it in <body>, and I can't get it to show up when I try to put it in my <head>. I'm guessing I should do it in CSS, but I am just really really bad at searching for what I need to find.
    
CPUMotherboardGraphicsRAM
Q6600 @ 3.2 BIOSTAR TForce TP43D2A7 LGA 775 Intel P43 ATX EVGA 8800 GTS SSC 640mb 4g G.Skill 1066 DDR2 (960 MHz @ 5-5-5-15 
Hard DriveOptical DriveOSKeyboard
Hitachi 460g 7200rpm OptiARC CD/DVD Windows XP Professional SP3 Alchemy Elixir 
PowerCaseMouse
XION 630W RAIDMAX Aztec Logitech MX518 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Q6600 @ 3.2 BIOSTAR TForce TP43D2A7 LGA 775 Intel P43 ATX EVGA 8800 GTS SSC 640mb 4g G.Skill 1066 DDR2 (960 MHz @ 5-5-5-15 
Hard DriveOptical DriveOSKeyboard
Hitachi 460g 7200rpm OptiARC CD/DVD Windows XP Professional SP3 Alchemy Elixir 
PowerCaseMouse
XION 630W RAIDMAX Aztec Logitech MX518 
  hide details  
Reply
post #4 of 7
Should just remove borders and center it and fix it to the top top center, right? All in css in the header.php or index if that is how you are doing it.
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
post #5 of 7
CSS will do it.

Learn how to setup a basic CSS file.

You will find the exact CSS attributes you need to set to achieve this here:

http://www.w3schools.com/css/css_background.asp

CSS is super easy.
Ender
(8 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3820 TPOWER X79 GeForce GTX 570 Corsair 16GB 
Hard DriveCoolingOSPower
Crucial M4 128GB SSD Antec Kuhler 620 Win 7 Seasonic M12 600w 
  hide details  
Reply
Ender
(8 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3820 TPOWER X79 GeForce GTX 570 Corsair 16GB 
Hard DriveCoolingOSPower
Crucial M4 128GB SSD Antec Kuhler 620 Win 7 Seasonic M12 600w 
  hide details  
Reply
post #6 of 7
css is easy. Just link the html file to it and go!
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
post #7 of 7
Quote:
Originally Posted by A-E-I-Owned-You View Post
css is easy. Just link the html file to it and go!
Yep.

By the way, the site that you referenced uses a very simple CSS format for the header.

Code:
#header_bg {
background: url(img/header.gif) no-repeat center top;
Andy by the way, why are you using an image that is 2500x400? That's ridiculously big.
Ender
(8 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3820 TPOWER X79 GeForce GTX 570 Corsair 16GB 
Hard DriveCoolingOSPower
Crucial M4 128GB SSD Antec Kuhler 620 Win 7 Seasonic M12 600w 
  hide details  
Reply
Ender
(8 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3820 TPOWER X79 GeForce GTX 570 Corsair 16GB 
Hard DriveCoolingOSPower
Crucial M4 128GB SSD Antec Kuhler 620 Win 7 Seasonic M12 600w 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › A really dumb novice web question.