Complete Guide to Creating a Blog Website Layout

Now make some test to see if it is seamless. Edit your CSS and update your body element with

body {background: url(graf/bgtop.jpg) top left repeat-x}

preview your html in browser:

As you can see it’s not really perfect. But we will do old (and pretty cheap, but actually working) trick to make in seamless. Duplicate your cut layer (we are working on lots of files so don’t get confused) and go to Edit > Transform > Flip horizontal. Then use Eraser tool with soft brush on one edge of copied layer and save this file (actually overwrite) as bgtop.jpg again. You won’t see a big difference here, but refresh your browser and check by yourself that it looks better. It’s not perfect for we should make it wider and add more random lights and noises, but it eventually fit our expectations and also surely will blend with header image so we wouldn’t make transparent PNG (which would be heavy for sure considering alpha opacity) but lightweight jpg. The width of 40 pixels is a minimum to make a noise repetition invisible. Occasionally 30 pixels would work, but 40px is a safe value here.

Additionally I will highlight: this is the way that we will cut every single image for our design, the process is to select (with fixed values, with guides, or just freely selected) element/area, copy or copy merged and then paste to the new document. If eventually it will be produced other way- I will say that. Hide all the layers on header that are not needed to ours background, which are: logo, about/navigation and search form. Then we know that ours header is 1600×340, do the fixed selection (or use your guide to help you select that area), copy merged, new document and save it as a top.jpg.

Add this to your html code (in body tag):

</p> <div id=”wrap_header”> <div id=”header”></div> </div> <p>

And update your CSS, as you can see in blank CSS there are commented areas, use them so you will not get confused when you will have a lot of id names and classes.

/*—– HEADER —–*/<br /> #wrap_header{ width:100%; margin:0 auto; height:340px; background: url(graf/top.jpg) top center no-repeat; } #header { width:980px;height:340px; margin:0 auto;position:relative; }

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19