ایجاد بکگراند و منوهای کم حجم با استفاده از تصاویر تکرار پذیر !

[ms368]

سلام
عکس زیرو ببینید

مشاهده پیوست 113821

چطور میشه اون رو به 3 تکه برش داد و در css یا html اون رو جوری تعریف کرد که فقط قسمت وسط در محور ایکسها تکرارپذیر شه و قسمت چپ و راست رو هم به صورت نرمال بتونه قرار بده ؟
مثه این عکس
مشاهده پیوست 113823 مشاهده پیوست 113824 مشاهده پیوست 113822

خواهش میکنم راهنمایی کنید ...
tnx

 

[webs]

<style>
.bgleft {width:15px; height:58; background-image:url('bgleft.jpg');float:left;}
.bgcenter {width:300px; height:58;background-image:url('bgcenter.jpg'); background-repeat:repeat-x;float:left; padding:17px;}
.bgright {width:15px; height:58;background-image:url('bgright.jpg');float:left;}
</style>

<div class="bgleft"></div>
<div class="bgcenter"> Your Text</div>
<div class="bgright"></div>

و دیگر هیچ...!

 

[ms368]

خیلی ممنون دوست خوبم

 

[sadeghspiderman]

من تصویری مثل این دارم : http://www.css3.com/wp-content/themes/convergence/images/bgr.gif (که 3 در 500 پیکسله )

که میخوام به صورت هم افقی و هم عمودی بکگراند سایت باشه ولی وقتی از دستور repeat استفاده مکنم تو حالت عمودی وقتی تموم میشه (500 پیکسل عمودیش تموم میشه) دوباره از اول اون عکس شروع میکنه به تکرار که ضایع میشه و قطعی بوجود میاره تو بک گراند

در صورتی که میخوام همون تصویر حالت کشیده پیدا کنه مثله سایت خودشون

کد فعلی اینه :

body {
 background:url(/images/bgr.gif) repeat;
 color:#2a2a2a;
 line-height: normal;
}

 

[MihanV]

اینو جایگزین کن :

body {
 background:url(/images/bgr.gif) repeat-x;
 color:#2a2a2a;
 line-height: normal;
}

 

[sadeghspiderman]

اینو جایگزین کن :

body {
 background:url(/images/bgr.gif) repeat-x;
 color:#2a2a2a;
 line-height: normal;
}

سلام و تشکر

با این کد فقط به صورت افقی تکرار میشه و از ارتفاع 500 پیکسل به پایین سایت سفید می مونه (افزایش ارتفاع خود عکس هم منطقی نیست و این سایت هم همین عکس رو با همین ارتفاع در هر دو سمت تکرار کرده

 

[MihanV]

سلام و تشکر

با این کد فقط به صورت افقی تکرار میشه و از ارتفاع 500 پیکسل به پایین سایت سفید می مونه (افزایش ارتفاع خود عکس هم منطقی نیست و این سایت هم همین عکس رو با همین ارتفاع در هر دو سمت تکرار کرده

بفرمایید این تصحیح شده و درست نمایش میده :

body {
	background:#f7f6f6 url(/images/bgr.gif)  repeat-x top;
	color: #2a2a2a;
               line-height: normal;
}

 

[sadeghspiderman]

بفرمایید این تصحیح شده و درست نمایش میده :

body {
	background:#f7f6f6 url(/images/bgr.gif)  repeat-x top;
	color: #2a2a2a;
               line-height: normal;
}

درست شد. خیلی خیلی ممنون