| | |||||
| ||||||||
| Programming PHP, Perl, Ruby on Rails, AJAX, HTML, XHTML, CSS, JavaScript, MySQL and any other coding topics. |
![]() |
| | LinkBack | Thread Tools |
| | THREAD STARTER #1 (permalink) |
| NamePros Regular Join Date: Mar 2006 Location: USA
Posts: 497
![]() ![]() | 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. |
| |
| | #2 (permalink) |
| Account Closed Join Date: Apr 2004 Location: ~root
Posts: 1,091
![]() ![]() ![]() ![]() ![]() ![]() ![]() | 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. |
| |
| | #3 (permalink) |
| NamePros Member Join Date: Jun 2008
Posts: 33
![]() | 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. |
| |
| | THREAD STARTER #4 (permalink) |
| NamePros Regular Join Date: Mar 2006 Location: USA
Posts: 497
![]() ![]() | 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? |
| |
| | #5 (permalink) |
| Senior Member Join Date: Jul 2005 Location: NJ
Posts: 1,219
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() | 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! |
| |
| | #6 (permalink) | ||||
| Account Closed Join Date: Apr 2004 Location: ~root
Posts: 1,091
![]() ![]() ![]() ![]() ![]() ![]() ![]() |
![]() 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;
} ????: NamePros.com http://www.namepros.com/programming/493252-css-positioning-and-repeating-backgrounds-help.html Code: <div id="text">Your text here.</div> 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!
Last edited by Sergio965; 07-16-2008 at 07:06 PM.
| ||||
| |