postioning an image

Tommyttt · #1 Jun 25th, 2008, 16:42

Hi

Im new to CSS and have started building a webpage.

I want an image (gradient) to display at the very top of the page, and stretch across the whole page, even if a browser expands.

I think its to do with ems, but im not sure which values etc to enter.

The size of the image is: 1000w and 20h.

Hope you can help....its driving me bonkers

Crow555 · #2 Jun 25th, 2008, 17:27

Assuming your image is an image that has a pattern and you want it repeated (stretching can distort an image) may I suggest:

.myPageHeader {
background: url(myImageFile.jpg) repeat-x 0 100%
}

where myImage is the class found in your page representing the top of your page, and myImageFile.jpg is the path to the file itself.

repeat will repeat an image horizontially and vertically. Repeat-x is horizontal and repeat-y is vertical only. No-repeat will display the image once.

I hope this helps you.

unitedcraig · #3 Jun 26th, 2008, 10:58

Could you provide a link to your site?

Also, if the image is pretty simply, cut it down the the least amount of pixels wide, this will reduce loading time.

Eg, if you have a simple gradient, what a lot of people do is to reduce the image to 1px wide, as repeating this image would have the same affect as repeating the same image 100px wide, it would just be 100 times quicker to load.

Bocaj · #4 Jun 26th, 2008, 11:13

if it's 1000px wide, i'd guess he'd be repeating it vertically... in which case it's repeat-y

Easy to remember mind, because X is a cross

yeah you'd only need 1px times however much.

If you want to repeat it horizontally it would need to be xamount height, and 1 px width, or the other way for vertical (for gradients anyway, and assuming it's a linear gradient.)

unitedcraig · #5 Jun 26th, 2008, 11:17

As all images are different, best thing to do would be give us a link to your site so we can see exactly what it is you are trying to do

Tommyttt · #6 Jun 27th, 2008, 13:01

Hay thanks!

Sorry for not being specific.

I have a graident background which im repeating, however I would like a strip of colour (which is also a graident)to sit at the top of the browser. I also want it to stretch and re-size as the user makes the browser bigger or smaller.

So what im gonna try now is to add this image to the divtag which holds the repeating image, and try to get the CSS rule to make it elastic.....

Tommyttt · #7 Jun 27th, 2008, 13:12

didnt work.

So what I want to do is have an image and apply a CSS rule to it, wrap a divtage round it. Then the image should stretch as the browser re-sizes.

Crow555 · #8 Jun 27th, 2008, 13:42

Have you got a sample of the gradient image? If we can see what you have to work with we might have a better idea of what it is you want to try. You have host it on image shack or some other image sharing site.

Tommyttt · #9 Jun 27th, 2008, 14:40

Its just a gradient, yellow to blue.

The location of the image in the code:

</head>

<body class="twoColFixLtHdr">

<div id="topGradient"><img src="top_gradient.jpg" width="1024" height="10" /></div>
<div id="container">
<div id="header">
<h1>Header</h1>

</div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>

Heres the CSS rule for that divtag that is wrapped around the image.

.twoColFixLtHdr #topGradient {
float: left;
height: 10px;

}

any ideas?????????????

Tommyttt · #10 Jun 27th, 2008, 14:42

http://www.zune.net/en-US/

PS This is the effect that I want.

Tommyttt · #11 Jun 27th, 2008, 15:15

I found a way to do it.

Turn off the horizontal scrolling bar!! WOOOooooHHOOOoooo

Oh dear....exicted about Dreamweaver...

moojoo · #12 Jun 27th, 2008, 15:51

Quote:

Originally Posted by Tommyttt

I found a way to do it.

Turn off the horizontal scrolling bar!! WOOOooooHHOOOoooo

Oh dear....exicted about Dreamweaver...

Oh no, not good.

All you need to do is make a graphic of your gradient and set the body {} in your css to something like

body {background:#CCCCCC url(../images/foo.jpg) repeat-x left top;}

setting the color value "#CCCCCC" to the solid color your gradient image ends in.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Postioning orange boxes to left of page	Johnathan	Web Page Design	15	Feb 18th, 2008 23:23
[SOLVED] multiple image rollover not restoring image	snappy	JavaScript Forum	4	Nov 5th, 2007 15:38
Image gallery not displaying enlarged image	AdRock	PHP Forum	15	Sep 1st, 2006 12:31
Background image overlaping footer image at bottom of div	lw_d	Web Page Design	4	Mar 21st, 2006 01:27
how can i create a wireframe image from a solid image of som	benbacardi	Graphics and 3D	5	May 22nd, 2004 12:05

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
postioning an image