Making a basic CSS Image Header [Photoshop Website] HD 720p

In this video I show you one of the most simple techniques to make a graphic header on a web page that extends the whole width of the browser window using a Photoshop mockup, HTML and CSS coding.

This technique is very common but is very useful when making a website from a Photoshop mockup, by using the slice tool you can cut a small sample of the header and you can then extend it in the X or Y axis for infinity on your browser window. Thus creating the illusion that the header stretches across the browser window and changes size according the the browser window.

----------------------------

CSS code used:
* {
margin: 0;
padding: 0;
{

body {
background:url(images/header.png) repeat-x #ffffff
}

url(images/header.png) - this is for my personal scenario, the URL refers to the image name and its directory (location) after the CSS file. For example:

1)The CSS file is in: "C:/website"
2)The image is in: "C:/website/images"
3)The image is named: "crab.png "
4)The URL used would be: "url(images/crab.png)"

#ffffff = Hex code for white, Google hex codes to learn more about them, otherwise use photoshop to generate your hex codes as shown in the video. (HEX CODES ARE UNIVERSAL, #FFFFFF IS WHITE, #000000 IS BLACK ECT. THEY DO NOT CHNAGE! :D)

Category:

Education

Tags:

• CSS
• HTML
• photoshop
• extend
• header
• repeat
• repeat-x
• hex
• code
• start
• begginer
• CS4
• website
• web
• browser
• firefox
• notepad
• ++
• HD
• 720p
• 720

[adalbertojoco]

Good!

But why english talking ppl talk to fast, looks like "hurry, the monster is getting close", uhuhuhu

[Curtguven]

dunno tbh lol

[Curtguven]

third ;)

[RhodderzX]

@stopthrm sorry ignore the previous comment, thinking about another annoying microsoft product, best thing to use is eaither dreamweaver or notepad ++ as they save all the content as you actually see it, or it could be your browser try another one.

[DanishRecordsVEVO]

Really cool :) thanks a lot for the informations :)

[stopthrm]

@RhodderzX Idid fix the problem. Everything works now. I had forgotten to zero out the CSS document's default margin and padding. It works now.

[RhodderzX]

@stopthrm erm syntax is the same but websites and programming are 2 different things, yes they have simularites but sometimes you just cant have the same or simular coding

[stopthrm]

I am trying to do this in Visual Studio 2008 and its just not playing ball. Syntax and everything is the same...

[moronart]

He doesn't talk fast, learn english

[sadistiquemind]

i tried this and nothing happened. all i have is blank page. the backgound doesn't even change colors.

[pulmonq2]

@adalbertojoco Haha, funny, but really, have you tried giving a dissertation on web creation in 5 or even 10 minutes? I would agree that time is a monster.

[atrainhxdotcom]

Thanks for this. Straight forward and clearly explained.

[theunknown98]

Hey, thanks :D