بک گراند,گرادینت دار+ تصویری ریز که تکرار شده

emad.h · Dec 17, 2007

با سلام
من یک سوال دارم که خیلی ذهنم مشغول کرده :
من میخوام یه صفحه داشته باشتم که بک گراند آن گرادینت دار هست و همچنین تصویری ریز تو اون تکرار شده ! الیته نه همه جا ی صفحه !
مثل این :

فکر کنم یهراهش اینه که :
من اول بک گراند صفحه رو با استفاده از رنگ یا عکس (تکرار عکس به صورت افقی) گرادینت دار کنم و بعد از اون, لایه بعدی رو, رو اون بیارم

راه حلش چیه ؟

echessdesign · Dec 17, 2007

درود بر شما
راه حل های زیادی وجود داره، نظر شما در رابطه با کد پیشنهادی من چیه؟

HTML:

<style type="text/css">
body {
	background:blue url('1.gif');
}
#wrp {
	width:100%;
              !width:100% /* ie7 hacked */
               _width: 100%;  /* ie6 hacked */
	height:100%;
	_height:100%; /* ie6 hacked*/
	background:red url('01.jpg')
}
</style>

emad.h · Dec 18, 2007

با سلام

از اینکه جواب سوال من رو دادید بسیار سپاسگذارم

من این کد رو تست کردم . فقط عکس gif تو پس زمینه تکرار میشه که ! میشه یه توضیحاتی در مورد این کد به من بدید..... شما خودت استادی فکر میکنی همه مثل خودت میشن .

به هر حال ما منتظریم ... مرصی

emad.h · Dec 19, 2007

سلام مجدد .

من همچنان منتظر راهنماییهای خوب شما هستم

با تشکر

در ضمن منظور کلی من اینه که :

من 2 تا عکس دارم .. میخوام عکس شماره 1 در زمینه تکرار بشه و عکس شماره 2 روی اون زمینه در جاهای خاص قرار بگیره ...
و بعد از اون صفحه اصلی سایت روی این 2 لایه قرار بگیره ... یعنی هر دو عکس پس زمینه باشه ...

با ز هم ممنونم

amirabbas_p30magazine · Dec 20, 2007

دوست عزیز قرار دادن دو تا تصویر در پس زمینه یک عنصر در حال حاضر امکان پذیر نیست. این قابلیت توی CSS 3 وجود داره که هنوز کامل نشده و همه مرورگر ها ازش پشتیبانی نمی کنند. شما میتونی یه تصویر رو در پس زمینه تگ body قرار بدید و کل طراحیتون رو هم داخل یه تگ div قرار بدید و مثلا آیدی wrap رو بهش بدید. بعد تصویر دوم رو در پس زمینه اون div با آیدی wrapper قرار بدید. درست همونطور که echessdesign توضیح داد.
کد html شما باید اینطوری باشه

کد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>your page title</title>
    <style type="text/css">
body {
	background:white url('bodyBg.gif');
}
#wrapper {
	
	background:white url('WrapperBg.jpg')
}
</style>
    </head>
<body>
<div id="wrapper"> 

xxx

</div>
</body>
</html>

echessdesign · Dec 21, 2007

سپاسگزارم امیر عباس جان از توضیح کامل شما
گویا اشتباها پس از تگ html/ شما تگ style رو قرار دادید....

amirabbas_p30magazine · Dec 21, 2007

کد رو از داخل نت پد کپی کردم. اون تکه کد اصلا اضافه بود. کلا حذفش کردم

ممنون

Dreamweb · Dec 21, 2007

سلام و درود بر شما؛
شما برای تصویرback ، به تصویری با ابعاد مثل 600*20 نیاز دارید که با کد زیر به صفحه شما اتصال پیدا می کند:
body{ background:url(images/bg.jpg) repeat-x #e8e8e8 margin: 0px; padding: 0px;}
باید دقت کنید که در صورت امتداد بیشتر صفحه از سایز 600 باید رنگ پس زمینه را متناسب با رنگ پائین عکس خود انتخاب بنمائید.
توجه کنید که کد زیر باید درCSS مورد استفاده شما قرار بگیرد.
با امید به اینکه مشکل شما حل شود در صورت گنگ بودن توضیحات در خدمت شما هستم.
با تشکر " ایمان "