CSS Forum

**scutari** · 08-22-2008, 12:07 PM

Can anybody tell me that this issue is impossible so I can sleep free. I have some psd file which has a layer-background with a diagonal pattern(lines2 in photoshop) and also a gradient overlay(gray)... So i am confused how to create a background for the html/css layout. I know I can use big pics but that would cause lots of size. I can convert each of one, but not both in the same time to create a background.. Anyone any solution?

**thehuskybear** · 08-22-2008, 12:29 PM

Well, you could overlay the backgrounds using div tags and positioning... (not sure if thats what your asking)

**LadynRed** · 08-22-2008, 12:31 PM

You mean similar to the web site in my sig ??

You should be able to get the effect you want by 'stacking' divs with backgrounds defined - which is what I did on the Corvette site.

**scutari** · 08-22-2008, 01:08 PM

yes carolina, that is what i meant, but You just have only your header, while my entire layout has to be filled with that kind of bg.yes I am doing that, but it will take lots of size..

**LadynRed** · 08-23-2008, 04:20 PM

Header, body, whatever, it would not require a huge image at all - and the patterned bg is NOT actually in the header of that site at all - it's on the body. The actual header is 'stacked' above it.

**scutari** · 08-25-2008, 04:13 PM

but how can you put the pattern and gradient overlay on the body, I cannot so that..I tried with a vertical pic and repeat-x, but it was not a good layout..

**LadynRed** · 08-25-2008, 09:06 PM

You don't put them both on the body, you 'stack' the divs - like this:

body{background: url(diagonalbg.gif); (this will repeat the background across and down)

#container{background: url(gradientbg.gif) repeat-x;

Then in your html you'd have something like this:

<body>
<div id="contaiiner">
<div id="wrapper">
the rest of your site layout goes in here

</div>
</div>
</body>

-The diagonal bg will show first, the bottom 'layer' if you will.
-The container with the gradient will be on the next 'layer' above it. You can even position where the gradient starts if you don't want it at the very top.
- The "wrapper" holds the rest of your site layout, on the next 'layer' above container, and you can put a background on that too if you choose.

The secret to getting a diagonal strip to tile properly is in the creation of the graphic

**scutari** · 08-26-2008, 06:17 PM

yes I have tried to do this too, but never mind now cause the psd owner wanted me not to do it anymore...there are some kind of patterns which can be repeated like you said:

{background: url(diagonal.gif)}

but do not why that I had was not working good..I have deleted the filesso I cannot give you a pic..though thanks for replying..