how to do this particular CSS technique? Stretching an element?

Ok, guys let me tell you at first that my CSS skills and knowledge is zilch and that isn't much, so if you would like to give any pointers please take this in considderation since i don't know the CSS Jargon.

From what i have seen on other websites and checking how things are done i see for example how they implement elements of the layout itself through CSS.

What amazes me from CSS that it apparently has the ability to make from an small image a full background...or element and also letting it start from a certain point and end on a certain point.

This catches my attention as a starting designer because for certain background elements i need to place very large images that would offcourse take longer time to load.

For example how would i do this?



Please take a look at the screenshot?

The nav bar on www.mobileringtones.com uses CSS technique i presume to make this small element

http://mobileringtones.com/images/nav_body_bkg_175x20.gif

stretch out and it only needs a top end and a bottom end to make it a full (table, do you call it this way?) background for the nav bar (main menu) to appear.

How can this be done?

 

You could actually chop that image down to only by 1 pixel tall if you wanted. What you do is you decide what area of the page you want to apply this background to. Then, simply set that image as a background for the container in question, and repeat it along the Y-axis, like so:

#nav { background:#FFF url(path/to/image.ext) left repeat-y ; color:#000 }

Code (markup):

I defined an area by giving it a unique ID, which would be expressed in your (X)HTML as <div id="nav">, I set a background color of white (this isn't necessary for the effect, but it is often good practice), I placed the background image on top of that solid white color, I tiled it down the left side of the #nav container, and I set a text color as well, to make sure the container didn't inherit a non-suitable color from a parent.

 

Thanks for your reply as i said before i am really a noob on this and am having difficulties understanding this.

Could you be so kind to give a full example so i only have to adjust a couple of values to determine the size of the width and height of the background. And also x and y location in combination with starting point and ending point.

I presume you also have to input where the x is gonna stop and also for the y?

Sorry if i am not very clear what i mean but i am trying as best i can and hoping for your understanding and patience.

I really want to understand this particular part of css since this can make great improvements of the way my page loads.

 

Well, you're not determining the width or height of the background itself. What you're determining is the amount of area over which you're going to allow your background to tile. You could set this by using the height style within the container of your choice. The problem with this is that you lose a great deal of flexibility within that element. If you have text in there, you run the risk of someone resizing it and busting out through the bottom of the container, for example.

Good, strategic engineering looks at ways to incorporate visuals into a layout such that the layout renders flexibly. It's really not enough to look at a single element. You should be looking at how the whole layout fits together.

Can you give more information about where you want the background element to stop, and in relation to what other elements on the page?

 

Hmm, i really don't have a fixed layout in mind and about text resizing and busting out...i really don't mind this because this would happen as well if i use images as an background

I am particularly interested in this

and how i can determine the starting position.

 

I'm working on a handy little reference for you now

 

Thanks i'm really looking forward to it

 

Ok, here's what I have: paulhirsch.com/ex/y-tile/

I put up to examples of how to use a small background to make a large background image.

The first example shows the background self-contained. There was no need to specify a tiling direction, because the box is only large enough to show it tiling in one direction anyway. It tiles to the bottom of the container in which it resides, and the container adjusts its height to accommodate whatever content is in it, adjusting the amount of tiling background that gets shown in the process.

The second example show the tile being used in a greater context. Notice that we've achieve the tiling effect down to the bottom of the parent container, even though the content on the left falls short. This is because the background is being attributed to the parent container in which the two content containers reside, and I tile the background down the left side of the container, using the repeat-y attribute. I added two small CSS workarounds, one to combat the three pixel jog in IE, and one to make sure the box with two content areas renders correctly in the event there is more content on the left than on the right (the left content area is floated). I combined them into one small bit of CSS. The whole centering/fluid design part of the second example is just for fun

I think I'll copy/paste what I wrote here into the page as comments

 

Wow, I'm not used to being a Peon on forums. I just got that URL posting restriction message

Erm...I think I can edit and make that active now, though...

or not

 

Thanks man, i will have a look at it and try if i can make it work for me as well

 

Hmm, like i predicted for myself...i'm having difficulties again to what to adjust

Looking at the source code of the page you posted i tried to give it a try but with no success. I think we should leave the text (foo!) part out as a whole to be more clear on an explanation fit for a noob like me

This is what i found from another site explaining how things work but the effect i am after was not explained

This will make an image go from the top to the bottom. What i need to know now is how i can position it exactly where i want and start and end tiling where i want it?

 

That code bit is very similar to what I created, only I used CSS shorthand to declare the image and the repeat axis.

#nav1 { background:#FFF url(bg.gif) ; border:1px solid #000 ; width:202px }

Code (markup):

The code you posted will place a background into the entire body of the page, which means you can't really meter how long it will be. The reason those paragraphs in my page exist is so you'll understand that the amount of background showing is dependent on how much content is present. The example would be meaningless if it wasn't done with content

That's the answer to your question on telling it where to start or stop.

 

Ok, i see your point about the need of content to make it tile from and and untill where.

But what if there isn't content at all? and you only want the image to tile from a certain starting point to a certain ending point?

 

Well, there has to be content of some type, even if it's a transparent spacer .gif with height and width explicitly set *hint* *hint*

 

You lost me here So i need to have text to make background elements with CSS?

Couldn't this be done without text content?

I don't know how to code this and how it should look like but i try to add something to the code i have found earlier.
I know it looks weird but i think you will get an fair idea of what i need to know.

HINTING with CSS questions coming from me? at this point i would be lost to the max if you are trying to give hints

Here goes...

 

No, you need to have content, something that holds that box open. Or, you can set height and width for the parent container, and this will tell the browser how much of that background to show.

The code bit you have is useless for you, because the background is being attached to the body element, which will most likely be the entire size of the viewport (there are a few browsers where this is not the case).

The following would be more accurate:

<html>
<head>

<title>Background Example #1</title>

<STYLE TYPE="text/css">
#object1 {background-image: url(background.gif); background-repeat: repeat-y; height:300px ; left:0 ; position:absolute ; top:150px }
</STYLE>


</head>
<body>

<div id="object1">&nbsp;</div>

</body>
</html>

Code (markup):

Otherwise, if you want the background to be on the body, tiling along an axis is not going to work for you.

 

Thank you for your patience, i have tried the code you pasted and it gives me a small blue streak line and it does not show the http://mobileringtones.com/images/na...bkg_175x20.gif as tiled from a certain point to another point.

The image doesn't look like the posted gif anymore because what i see now is a small blue line (1 pixel) for the height you specified in the code.

What happend?

 

Ahh, no width

<html>
<head>

<title>Background Example #1</title>

<STYLE TYPE="text/css">
#object1 {background-image: url(background.gif); background-repeat: repeat-y; height:300px ; left:0 ; position:absolute ; top:150px ; width:200px }
</STYLE>


</head>
<body>

<div id="object1">&nbsp;</div>

</body>
</html>

Code (markup):

You'll need to set that width to whatever you want it to be.

But seriously, I don't think using this code is the best thing to do. It's how you'd alter the code you already had to work for you, but I have serious doubts it'll do you any good once you start filling in other items on the screen.

To reiterate what I posted before, I don't think tiling is the right idea for the particular thing you're trying to do.

 

Yes, this code gives me the result i am after

What i would like to know in particular is how i (take a look at mobileringtones.com) is how i can make from small images just like the element i posted above, the 175x20.gif a bigger image and use that as an background to place my text on or other objects.

Because on that site the same technique is used, making the majority of the surface of the background (tables) by means of CSS.
In this manor you only need a small image and not a very large image so therefor increasing loading speed and bandwith

Let's say i make a page and want to put some squares in them to fill them up with content, i would earlier on place some images and over that place my text.
Now i can use smaller images

Hopefully if all works out further on the road
I would definately hear more from you if you know better techniques to accomplish this.

I want to thank you for your patience and efforts for helping me out on this

 

Are you the administrator for mobileringtones.com, or are you using that site as an example of what you want to accomplish?

Down the road, when you have a layout designed and ready to go, come find me, and I'll try to guide you through the steps necessary to make it work. Every layout is a little different, and when you approach them strategically, you'll be amazed how efficient you can make your markup.

I can't remember the last time I used a table in a layout. It has to be more than a year now.