CSS help - UK Web Hosting | Dedicated Server Windows and Linux VPS Forum

**Ben** · #1 (**permalink**) 18-11-2007, 13:22

Okay... some of you are wondering where I've been... well I have been surfing the forums a bit in silence but lol... well here I am. Anyway, finally I have grasped margins/paddings and I am trying to make a basic layout. However, I need to stretch a gradient (if you get what I mean) on the top of my layout... which will be the navigational area. Here is my code so far - please don't complain about the internal style sheet - its only temporary.

HTML Code:

<html>
<head>
<title></title>
<style type="text/css">
div.body {
height: 33em;
margin: 3px 3px 3px 3px;
border-color: black;
border-style: solid;
border-width: 1px;
background-color: orange;
}

div.box1 {
width: 200px;
height: 200px;
overflow: auto;
padding: 3px 3px 3px 3px;
margin-top: 4em;
margin-left: 4em;
padding 3px 3px 3px 3px;
border-color: black;
border-style: double;
border-width: 3px;
background-color: white;
}

div.gradientbox {
height: 20px;
width: 1000px;
border-color: black;
border-style: solid;
border-width: 1px;
background-image: url("gradient.jpeg");
}
</style>
</head>
<body>
<div class="body"><div class="gradientbox">Text</div><div class="box1">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div></div>
</body>
</html>

**WelshTom** · #2 (**permalink**) 18-11-2007, 13:31

We sent a search part out but you really had gone :P

What exaclty do you want to do - you need to clarify yourself a bit more?

**developmentxl** · #3 (**permalink**) 18-11-2007, 14:16

Replace:

background-image: url("gradient.jpeg");

With:

background: url("gradient.jpeg") repeat-x;

Should work a treat

**Ben** · #4 (**permalink**) 18-11-2007, 14:18

Hello developmentxl,

Thanks for your help - both Thomas and yourself. I have the current code, but still won't work:

HTML Code:

<html>
<head>
<title></title>
<style type="text/css">
div.body {
height: 33em;
margin: 3px 3px 3px 3px;
border-color: black;
border-style: solid;
border-width: 1px;
background-color: orange;
}

div.box1 {
width: 200px;
height: 200px;
overflow: auto;
padding: 3px 3px 3px 3px;
margin-top: 4em;
margin-left: 4em;
padding 3px 3px 3px 3px;
border-color: black;
border-style: double;
border-width: 3px;
background-color: white;
}

div.gradientbox {
height: 20px;
width: 1000px;
border-color: black;
border-style: solid;
border-width: 1px;
background-image: url("gradient.jpeg") repeat-x;
}
</style>
</head>
<body>
<div class="body"><div class="gradientbox">Text</div><div class="box1">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div></div>
</body>
</html>

Any ideas?

**developmentxl** · #5 (**permalink**) 18-11-2007, 14:20

Try using:

background:

rather than:

background-image:

**Ben** · #6 (**permalink**) 18-11-2007, 14:22

Ah! Works perfectly now! Thank you for your help there...