CSS positioning and repeating backgrounds help

snike · 07-15-2008, 09:41 PM

Is it possible to have a background start at point (0px,110px) and repeat downward? Is there anyway to do this or mimick this?

Thanks in advace.

Sergio965 · 07-15-2008, 10:26 PM

Sure. You could create a div and do this:

#div {
position: absolute;
top: 0px;
left: 110px;
width: 300px;
height: 100px;
background: url(background.gif) repeat-y;
}

Basically, this well place your image 110 pixels to the right of the top left corner of the screen and repeat your background down from there with the constraint of 300px width. To call it, use: <div id="div"></div> Of course.

name-cloud · 07-16-2008, 05:25 AM

Or you could use body {background-position: 0 110px;}. Check www.w3schools.com

snike · 07-16-2008, 11:20 AM

Thanks! I'll try it out soon and I'll let u know/

This did not work the way i wanted it to. The text shouldn't start where the background starts but at the top where there is no background and continue downward.

Sorry. Is this possible?

nasaboy007 · 07-16-2008, 02:13 PM

you would have to make multiple divs then, one without the backgruond (for the text) and then the second one with the background.

or you could just position the backgruond div usign absolute (so its down further) and then use something like margin-top:-200px; or w/e, but im not sure if that'll work.

Sergio965 · 07-16-2008, 06:02 PM

Quote:

Originally Posted by snike

Thanks! I'll try it out soon and I'll let u know/

This did not work the way i wanted it to. The text shouldn't start where the background starts but at the top where there is no background and continue downward.

Sorry. Is this possible?

I'm not too familiar with the "background-position" element of CSS, but it seems like it might do the trick without using so much code. Either way, this is the code I came up with.

CSS:

Code:

#text {
background-image: url(bg.jpg); //Picture we will use.
background-repeat: repeat-y; //States to repeat on the y axis (vertically.)
background-position: 110px 100px; 
// Background Position moves the background 110px right and 100px down within its current element. It will not move the background itself, but within the container...
height: 300px; //Sets the height of the div.
}

<=== or ===>

#text {
background: url(bg.jpg) repeat-y 110px 100px; //Condensed.
height: 300px;
}

HTML

Code:

<div id="text">Your text here.</div>

And there you have it.

Do note that they above form of coding in CSS isn't quite standard and thus shouldn't be used unless you're trying to teach someone the elements in the condensed version.

Good Luck!

snike · 07-18-2008, 12:28 AM

Thank you everyone!!!

It worked out fine. Thanks!

07-15-2008, 09:41 PM	#1 (permalink)
snike NamePros Regular Join Date: Mar 2006 Location: USA Posts: 474 7.38 NP$ (Donate)	CSS positioning and repeating backgrounds help Is it possible to have a background start at point (0px,110px) and repeat downward? Is there anyway to do this or mimick this? Thanks in advace.

07-16-2008, 05:25 AM	#3 (permalink)
name-cloud NamePros Member Join Date: Jun 2008 Posts: 33 0.00 NP$ (Donate)	Or you could use body {background-position: 0 110px;}. Check www.w3schools.com __________________ business: name-cloud.com blog: patdryburgh.net I strongly recommend MediaTemple.net for web hosting.

07-16-2008, 02:13 PM	#5 (permalink)
nasaboy007 Senior Member Join Date: Jul 2005 Location: NJ Posts: 1,112 1,454.30 NP$ (Donate)	you would have to make multiple divs then, one without the backgruond (for the text) and then the second one with the background. or you could just position the backgruond div usign absolute (so its down further) and then use something like margin-top:-200px; or w/e, but im not sure if that'll work. __________________ Hacksar.com - Your source for random computer tips and tricks! MySiteMemberships.com - Keep track of your site registration information! Like my post? Rep is appreciated!

07-15-2008, 10:26 PM	#2 (permalink)
Sergio965 Account Closed Join Date: Apr 2004 Location: ~root Posts: 1,095 1,505.80 NP$ (Donate)	Sure. You could create a div and do this: #div { position: absolute; top: 0px; left: 110px; width: 300px; height: 100px; background: url(background.gif) repeat-y; } Basically, this well place your image 110 pixels to the right of the top left corner of the screen and repeat your background down from there with the constraint of 300px width. To call it, use: <div id="div"></div> Of course.

07-16-2008, 11:20 AM	#4 (permalink)
snike NamePros Regular Join Date: Mar 2006 Location: USA Posts: 474 7.38 NP$ (Donate)	Thanks! I'll try it out soon and I'll let u know/ This did not work the way i wanted it to. The text shouldn't start where the background starts but at the top where there is no background and continue downward. Sorry. Is this possible?

07-18-2008, 12:28 AM	#7 (permalink)
snike NamePros Regular Join Date: Mar 2006 Location: USA Posts: 474 7.38 NP$ (Donate)	Thank you everyone!!! It worked out fine. Thanks!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)