On the example page, you can see both a gradient background, and a drop-shadow background. How is this achieved?
A:
I think this is what you are looking for, you can also do it in one line:
body {
background: url('http://www.libertyseguros.pt/Images/repeat.jpg') top repeat-x #3F8AAA;
}
I'd replace the image url with a local one, but you should get the idea. After this, your other markup will go on top of your body etc.
Acorn
2009-07-22 15:39:03
A:
Just set a background image on your page's body using CSS.
The the rest of the content will sit in front of it.
(You could make your title a bit more descriptive.)
edeverett
2009-07-22 15:39:30
This does not answer his question. He was asking how to combine gradient background with a shadow drop effect on the content section, not just the gradient on the body layer.
awe
2009-08-31 08:31:24
A:
It's simply a series of background images arranged next to each other, like so:
+-------+-------------+-------+
| 1 | 2 | | 4 | 1 |
| | | 3 | | |
| | | | | |
The left-most and right-most images are identical, 1-pixel-wide vertical gradients. The inner (2, 4) images are transition gradients that are mirror images of each other, and the centerpiece (3) is simply an image whited out in the right spots to accept the logo.
John Feminella
2009-07-22 15:40:50
+4
A:
This is simply a background-image with a div having automatic-margins:
#wrapper {
background: blue url("gradient.jpg") left top repeat-x;
}
#content_shadow {
background: black url("side-shadow.jpg") left top no-repeat;
width:960px;
margin:auto;
}
#content {
width: 940px; margin: auto; background: white;
}
<div id="wrapper">
<div id="content_shadow">
<div id="content">
<p>Hello World</p>
</div>
</div>
</div>
Jonathan Sampson
2009-07-22 15:41:22
+1
A:
Look at the page source
<head>
... <link href="App_Themes/Liberty/LibertyStyle.css"
type="text/css" rel="stylesheet" /> ...
</head>
LibertyStyle.css is the style sheet you need. You can look at it following the corresponding url http://www.libertyseguros.pt/App_Themes/Liberty/LibertyStyle.css. The interesting properties are the following:
body
{
background-image:url('../../Images/repeat.jpg');
...
background-repeat:repeat-x;
...
}
Thus, it is just a repeated background (http://www.libertyseguros.pt/Images/repeat.jpg).
This page explains the above technique in more detail.
Federico Ramponi
2009-07-22 15:53:23
A:
The background gradient is applied on body, and the shadow are two separate backgrounds applied in a separate layer.
In the page you referred to, the drop shadow images are applied as full size jpg images. I would pesonally use 1px high png with 32 bit gradient transparency.
Also the page you reffered to are using absolute positioned div tags. My example uses table for simplicity.
<head>
<style type="text/css">
body
{
background-image:url('repeat.jpg');
background-repeat:repeat-x;
background-color: blue;
}
#leftShadow
{
width:50px;
background-image:url('shadowLeft.png');
background-repeat:repeat-y;
}
#mainContent
{
width:800px;
background-color: white;
}
#rightShadow
{
width:50px;
background-image:url('shadowRight.png');
background-repeat:repeat-y;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="margin-left:80px;margin-right:80px;height:90%;">
<tr>
<td id="leftShadow"><!-- Left shadow --></td>
<td id="mainContent"><!-- Main content --></td>
<td id="rightShadow"><!-- Right shadow --></td>
</tr>
</table>
</body>
awe
2009-08-31 08:17:20