ورود

View Full Version : سوال: استفاده از عکس و پترن در بک گراند


e_a_23
چهارشنبه 16 بهمن 1392, 08:03 صبح
دوستان عزیز سلام
اگر بخوام به بالای بک گراندم عکس بدم و پایینش پترن باید چیکار کنم؟
Tobegar
چهارشنبه 16 بهمن 1392, 12:05 عصر
با سلام دوست عزیز شما میتونید با استفاده از خاصیت Multiple-Background در Css اینکار رو انجام بدید !
یه نمونه هم در لینک زیر گذاشتم :
http://www.css3.info/preview/multiple-backgrounds/
refugee
چهارشنبه 16 بهمن 1392, 14:17 عصر
بدین صورت :



body {
background: url(images1.jpg) , url(images2.jpg);
}
e_a_23
پنج شنبه 17 بهمن 1392, 10:57 صبح
مشکل من حل نشد. فرم های مختلفی رو امتحان کردم.بهترینش به صورت شکل زیر شد. کسی می تونه کمک کنه؟
عکس رو چه جوری اینجا بذارم؟
اینم کد:

body
{
background:url("../Images/bg1.jpg") no-repeat , url("../Images/patt.jpg") repeat;

}

عکس اول می ره گوشه سمت چپ بالا و پترن باقی صفحه رو پر می کنه.نمی دونستم عکس رو چه جوری اینجا بذارم تا واضح تر بگم منظورمو :خجالت:
refugee
جمعه 18 بهمن 1392, 00:36 صبح
خب به عکس اولی خاصیت فیکسید و میانه رو بدین .



body {
background:url(img.jpg) no-repeat fixed 0 0 ;
}


دومی هم که تکرار میشه و همه رو در بر میگیره .
e_a_23
جمعه 18 بهمن 1392, 07:12 صبح
بازم درست نشد. مشکل از اینجاست که عکس اول فقط با خاصیت cover کشیده می شه و عرضش به اندازه عرض مرورگر میشه ولی وقتی از کاور استفاده می کنم دیگه پترن نشون داده نمی شه.یه جوری باید از cover استفاده کنم اما نمی دونم چه جوری.
e_a_23
جمعه 18 بهمن 1392, 11:02 صبح
اصلا این کاری که من می خوام امکان پذیر هست؟چون عکس بالایی باید کاور بشه شاید نشه به همراه پترن به کار برد.
refugee
جمعه 18 بهمن 1392, 14:46 عصر
بازم درست نشد. مشکل از اینجاست که عکس اول فقط با خاصیت cover کشیده می شه و عرضش به اندازه عرض مرورگر میشه ولی وقتی از کاور استفاده می کنم دیگه پترن نشون داده نمی شه.یه جوری باید از cover استفاده کنم اما نمی دونم چه جوری.


اصلا این کاری که من می خوام امکان پذیر هست؟چون عکس بالایی باید کاور بشه شاید نشه به همراه پترن به کار برد.

سلام استاد ؛
بله شدنی است کافی بود یکم سرچ میکردین . کلی نتیجه بدست میومد .
نتایج جستجوی من :

1. http://www.sitepoint.com/css3-background-size-property/
2. http://css-tricks.com/perfect-full-page-background-image/
3. http://www.w3schools.com/css/css3_backgrounds.asp
4. http://www.css3.info/preview/multiple-backgrounds/

کافیه ؟ :لبخند:

و روش به این صورت است :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
background:url(demo.jpg) no-repeat top 0px center,
url(logo.png) repeat;
background-size:100%, auto;
}
.content {
width:980px;
margin:0px auto;
height:2000px;
background:#900;
}
</style>
</head>

<body>
<div class="content">salam</div>
</body>
</html>


توضیح خواستید بگید .

همچنین یه دمو هم براتون درست کردم .

ادرس دمو :‌ http://asila.ir/e_a_23/

و دانلود فایل اموزشی : http://asila.ir/e_a_23.zip

دقیقا چیزی است که شما نیاز دارید . فقط فکر کنم اندازه عکس اولی 100٪ کل صفحه نبود . میتونید به مبنای درصد یا پیکسل بدین .

موفق باشید
refugee
جمعه 18 بهمن 1392, 14:49 عصر
این روش با استفاده از سینتکس های css3 انجام میشه . و فکر کنم IE ورژن پائین تر ساپورت نکند .

اینجا یه تضیحاتی داده ولی من متوجه نشدم . ( زبانم خوب نیست :خجالت: )

http://msdn.microsoft.com/en-us/library/ms532920%28v=vs.85%29.aspx
tamafi6
جمعه 18 بهمن 1392, 21:12 عصر
دوستان عزیز سلام
اگر بخوام به بالای بک گراندم عکس بدم و پایینش پترن باید چیکار کنم؟
اینجا
http://barnamenevis.org/showthread.php?406840-%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86-%D8%A8%DA%A9-%DA%AF%D8%B1%D8%A7%D9%86%D8%AF%D9%87%D8%A7-%D8%A8%D9%87-%D8%B5%D9%88%D8%B1%D8%AA-%D9%84%D8%A7%DB%8C%D9%87-%D8%A8%D9%87-%D9%84%D8%A7%DB%8C%D9%87
e_a_23
سه شنبه 22 بهمن 1392, 22:44 عصر
دوستان می شه این کارو با دو تا div انجام داد؟ میخوام واسه IE 7, 8 هم این بک گراند رو استفاده کنم ولی همونطور که می دونید این دو تا از css3 پشتیبانی نمی کنند. کسی راهی به ذهنش می رسه؟ اگه بخوام دو تا div بدم، باید height رو چه جوری تعریف کنم؟ min-height بدم؟