سلام دوستان
چطور توی جوملا 3 یه عکس رو بکگراند یک table بگذاریم
من هر چی اینکار رو توی frontpage انجام میدم انجام میشه ولی وقتی کد ها رو توی custom html module کپی می کنم
قسمت مربوط به عکس بکگراند رو از کد table پاک می کنه بعد از ذخیره کردن
چرا ؟؟/؟
مثلا میخوام این عکس ضمیمه رو بذارم بعد وسط ش که جای خالی هست متن بنویسم به گونه ای که اگر رزولوشن مانیتور کاربر هم بزرگتر از سایز عکس بود عکس کشیده بشه و اندازه صفحه بشه و اگر کوچیکتر بود اندازه ی همون صفحه بشه
سلام
می تونید اون table رو درون یک div بیندازید و سپس به بک گراند اون div عکس رو بدید !
برای کشیده شدن عکس
باید اولا سایتتون ریسپانسیو باشه
حالا اگه ریسپانسیو هم نباشه می تونید عرض و طوا div گفته شده رو با عرض و طول عکستون تنظیم کنید
سپس display اون دیو رو توی flat قرار بدید و سپس متنی رو که می خاید در وسط قرار بگیره margin:auto کنید
حالا تو هر مانیتوری که ممکن هست در کل عالم هستی ، او نوشته دقیقا در وسط ِ اون دیو قرار میگیره !
الان گیج تر از اول شدم ولی خیلی ممنون از پاسخ هاتون
قربون دست همگی تون مممنون
میگم میشه اینایی رو که گفتید کدش رو بنویسید بفهمم
من از dreamweaver و frontpage استفاده می کنم
ببینید :
از اونجایی که حرفاتون پیداست
شما می خاید که یک متی داشته باشید که یک نوشته دقیقا در وسط اون قرار بگیره
برای این کار شما :
1 - نیاز به یک div دارید که طول و عرضش دقیقا هم اندازه با عکس باشه
استایل این div ، عکس رو از طریق background image به پس زمینه ی div بدید و مهمترین قسمت اینکه display اون دیو رو در حالت flex بزارید
2 - سپس نوشته تون رو درون یک p تگ یا span بزارید و margin ِ اون p یا span رو در حالت auto قرار بدید !
همش همین !
لطفا این مثال رو که همین الان تو jsfiddle ساختم ببینید :
دیدن لینک ها برای شما امکان پذیر نیست. لطفا
ثبت نام کنید یا
وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
اگه اندازه ی عکس رو تغییر بدی
میبینی که نوشته همیشه تو وسط عکس قرار میگییره !
آهان فهمیدم اینجوریه
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
#wrapper {
width:260px;
height:200px;
background-image:url('24208.jpg');
background-size:cover;
display:flex
}
#text {
margin:auto;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.o
nload=function(){
}//]]>
</script>
</head>
<body>
<html>
<div id="wrapper">
<p id="text">Some example text</p>
</div>
</html>
</body>
</html>
ولی جالب اش اینه که توی کروم و فایرفاکس درست هست ولی توی اینترنت اکسپلورر نوشته میره سمت چپ
و خراب میشه