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)
Video Rating: 0 / 5