Html Question: Just One Background

[Jun]

I'll use Newgrounds as an example.

I want to have just one image as the background without it tiling downwards. For example, look at the Grey, Yellow box, then faded grey on the Newgrounds pages.

Is it possible to make the page so that the background only tiles horizontally at the top? (I'll design it so it flows into the background colour chosen for the page)

I'm not sure how to word this question, but I'll throw another page into the story. Go look at the World of Warcraft page. Notice how they use the background image at the top and then it fades to black, where I imagine they'd just use a simple colour as the background instead of an image to save up on time taken for the page to load.

How would I achieve this effect? Do I have to make an underlying table or is there a way to get this through some background code?

I never covered this type of stuff in my short HTML section I did in my CS: Software Design/programming course.

Any help would be greatly appreciated. My apologies if I never got my point through.

[Jessii]

They did a gradient with a diagonal pattern overlay. I don't really know how they did it so that it stretches without it repeating.

[<deleted>]

At 11/14/05 08:04 AM, Jessicasso wrote: They did a gradient with a diagonal pattern overlay. I don't really know how they did it so that it stretches without it repeating.

It doesn't stretch out; the bottom of the image, where the faded color ends, is the same color as the background, to give the effect of a stretch.

The BG image used on NG.

I don't really know how to do this, so I'm going to wait for a responce with you, Jun_.

[Afro-Ninja]

It's a background division. The background color of the div is the gray you see at the bottom. The image itself is the sliver that was posted above, repeated along the x axis at the top of the div

[<deleted>]

At 11/14/05 01:02 PM, Afro_Ninja wrote: It's a background division. The background color of the div is the gray you see at the bottom. The image itself is the sliver that was posted above, repeated along the x axis at the top of the div

How do I go about using <div align> in this case, if I do at all?

[Afro-Ninja]

At 11/14/05 01:04 PM, PantherLock wrote:

At 11/14/05 01:02 PM, Afro_Ninja wrote: It's a background division. The background color of the div is the gray you see at the bottom. The image itself is the sliver that was posted above, repeated along the x axis at the top of the div

How do I go about using <div align> in this case, if I do at all?

I can't remember exact syntax off the top of my head but it goes something like:

<div class="background">

//then, in your stylesheet

div.background{
background-color:gray;
background-image: url('/graphics/header.gif');
background-repeat: repeat-x;
background-position: top left;
}

I'm thinking that some of those can be combined together, but like I said I'm not too sure. That's the basic idea though.

[Bizarro]

At 11/14/05 01:21 PM, Afro_Ninja wrote:

At 11/14/05 01:04 PM, PantherLock wrote:

At 11/14/05 01:02 PM, Afro_Ninja wrote: It's a background division. The background color of the div is the gray you see at the bottom. The image itself is the sliver that was posted above, repeated along the x axis at the top of the div

How do I go about using <div align> in this case, if I do at all?

I can't remember exact syntax off the top of my head but it goes something like:

<div class="background">

//then, in your stylesheet

div.background{
background-color:gray;
background-image: url('/graphics/header.gif');
background-repeat: repeat-x;
background-position: top left;
}

I'm thinking that some of those can be combined together, but like I said I'm not too sure. That's the basic idea though.

You dont really need a div for this, you can just put it in body, and its all good

body{
background:#000000 url('http://www.url-of-img') repeat-x;
}

[Jessii]

At 11/14/05 04:17 PM, Bizarro wrote: body{
background:#000000 url('http://www.url-of-img') repeat-x;
}

makes sense to me