در ادامه آموزش CSS در سایت میزفا خدمت شما هستیم. در این پست با دستورات مربوط به استایل css آشنا خواهید شد. توسط دستورات استایل css می توانید ظاهر کلیه عناصری را که در صفحه HTML مورد استفاده قرار داده اید، تغییر دهید. شما می توانید رنگ، نوع و سایز فونت، رنگ یا تصویر پس زمینه و هر آنچه را که مایلید ظاهری مطابق خواسته شما داشته باشد، توسط این دستورات تغییر دهید.
سرفصلهای پست
- 1 استایل عناصر در CSS
- 2 استایل css پس زمینه ها
- 2.1 استفاده از رنگ برای پس زمینه ( background-color)
- 2.2 استفاده از تصویر برای پس زمینه ( background-image )
- 2.3 تکرار تصویر پس زمینه در محور افقی و عمودی ( Background-repeat )
- 2.4 تعیین موقعیت مکانی تصویر در پسزمینه ( background-position )
- 2.5 ثابت و یا قابل اسکرول بودن تصویر پسزمینه ( background-attachment )
- 3 پایان ترم
- 4 نتیجه گیری
استایل عناصر در CSS
- استایل پس زمینه ها در css (این پست)
- استایل متن ها در css
- استایل فونتها در css
- استایل لینک ها در css
- استایل لیست ها در css
- استایل جداول در css
استایل css پس زمینه ها
توسط CSS میتوانید برای عناصر در صفحات وب پس زمینه قرار دهید. این پس زمینه ها می توانند یک تصویر و یا یک رنگ مورد نظر شما باشند. دستوراتی که در CSS برای کار با پس زمینه ها وجود دارد عبارتند از:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
استفاده از رنگ برای پس زمینه ( background-color)
توسط این دستور میتونید رنگ پس زمینه عنصر مورد نظر خودتون رو تغییر بدید. مثلا پس زمینه یک پاراگراف، جعبه متن، div و یا هر عنصر دیگه ای رو با رنگ دلخواه پر کنید. به عنوان نمونه دستور زیر رنگ پس زمینه کل صفحه رو قرمز میکنه:
body {
background-color:red;
}
شما رنگ مثلا قرمز رو به سه روش میتونید با مورد استفاده قرار دهید:
- از طریق کد هگزای (کد HEX) رنگ- مانند:
body { background-color: #ff0000; } - از طریق کد rgb رنگ – مانند:
body { background-color: rgb(255, 0, 0); } - از طریق نام رنگ – مانند
body { background-color: red; }
در مثال زیر عناصر h1، p و div دارای پسزمینههایی با رنگهای متفاوت خواهند بود:
h1 {
background-color:#6495ed;
}
p {
background-color:#e0ffff;
}
div {
background-color:#b0c4de;
}
استفاده از تصویر برای پس زمینه ( background-image )
توسط این دستور میتونید یک عکس دلخواه رو به عنوان پس زمینه عنصر مورد نظر خود در صفحه وب قرار بدید. نحوه استفاده از این دستور به شکل زیر هست:
body {
background-image:url('paper.gif');
}
در دستور فوق ‘paper.gif’ نام تصویر مورد نظر هست. همیشه در پسزمینه متنها از تصاویری استفاده کنین که از خوانایی متن کاسته نشه. به یاد داشته باشین، اگر عکس مورد نظر شما داخل یک فولدر قرار داره، باید نام فولدر هم در پارامتر url ذکر بشه. به عنوان مثال اگه تصاویر مورد استفاده در وب سایت شما، در فولدری به نام images قرار داره، دستور فوق به شکل زیر باید نوشته بشه:
body {
background-image:url('images/paper.gif');
}
تکرار تصویر پس زمینه در محور افقی و عمودی ( Background-repeat )
برای داشتن صفحهای با سرعت بارگزاری بالا، همواره باید حجم صفحه رو پائین نگه دارین. افزودن پسزمینههایی با کیفیت بالا، سایز بزرگ و حجیم باعث کاهش شدید سرعت بارگزاری میشه. برای رفع این مشکل، طراحان وب سایت از یک تصویر کوچک با حجم بسیار کم استفاده میکنن. تصویری که هر تعداد از اون رو در کنار هم دیگه قرار بدیم، باعث بوجود اومدن تصویری واحد و یکپارچه میشه.
به عنوان مثال توسط تصویر زیر میتونیم یک پسزمینه برای کل صفحه وب ایجاد کنیم:
توجه داشته باشید که بطور پیشفرض، با نوشتن دستور پسزمینه به شکل زیر، تصویر در هر دو جهت افقی و عمودی تکرار میشه:
body {
background-image:url('paper.gif');
}
اگه بخوایم تصویر فقط در محور افقی تکرار شود، از دستور زیر استفاده میکنیم:
body{
background-repeat: repeat-x;
}
اگر بخواهیم تصویر فقط در محور عمودی تکرار شود، باید از دستور زیر استفاده کنیم:
body {
background-repeat: repeat-y;
}
اگر بخوایم تصویر فقط یکبار نشان داده بشه و تکرار نشه، باید از دستور زیر استفاده کنیم:
body {
background-repeat:no-repeat;
}
تعیین موقعیت مکانی تصویر در پسزمینه ( background-position )
هنگامی که بخواهیم تصویر در پس زمینه یکبار و بدون تکرار نشان داده شود، باید محل قرارگیری تصویر در یک زمینه بزرگ رو تعیین کنین. برای این منظور توسط دستور زیر موقعیت تصویر در پس زمینه رو تعیین میکنیم:
body {
background-position: right top;
}
به عنوان مثال توسط مجموعه دستورات زیر، پس زمینه صفحه وب سایت، در سمت چپ و بالای صفحه نشون داده میشه:
body {
background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: left top;
}
ثابت و یا قابل اسکرول بودن تصویر پسزمینه ( background-attachment )
شاید وبسایتهایی رو دیده باشین که هنگامی که صفحه رو برای مطالعه اسکرول میکنیم، پسزمینه اون ها در جای خودشون ثابت مونده و محتوای اون صفحه حرکت میکنه. این کار توسط دستور background-attachment انجام میشه:
برای اینکه تصویر با اسکرول کردن صفحه در جای خود ثابت باقی بمونه، از دستور زیر استفاده میکنیم:
body {
Background-attachment:fixed;
}
برای اینکه تصویر با اسکرول کردن صفحه همراه سایر عناصر حرکت کنه، از دستور زیر استفاده میکنیم:
body {
Background-attachment:scroll;
}
در جلسات آینده آموزش سی اس اس به بررسی استایل متن در css می پردازیم.
پایان ترم
[box type=”info” class=”question-from-users” width=””]پایان ترم، بخشیه که از این مقاله به بعد همراه ماست، و فرصتیه که شما آموخته های خودتون رو در اون آزمایش میکنین.
مقالات قبل به صورت مستقل نیاز به پایان ترم نداشتن، اما اگه مطالب مقالات قبل رو یادتون نیست، پیشنهاد میکنم که مجددا یه مروری بر اون ها داشته باشین که از پس این بخش بر بیاین 🙂
و حالا سوال:
از شما خواستن که پس زمینه ای به شکل زیر توسعه بدین:
و به عنوان منابع مورد نیاز، تصویر پس زمینه زیر رو بهتون دادن:
از کدوم دو خاصیت ذکر شده تو این مقاله، برای توسعه پس زمینه مورد نظر استفاده میکنین؟
نکته: تصویر پس زمینه یه مقدار از تصویر داده شده تاریک تره. این مسئله با linear-gradient انجام میشه که در این سوال بهش کار نداریم، اون رو نادیده بگیرین.
نکته: لوگوی میزفا در بالا سمت چپ پس زمینه، جزء پس زمینه نیست! اون هم نادیده بگیرین.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبتنام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله، خاصیت های اصلی برای تعریف تصاویر پس زمینه رو با هم بررسی کردیم.
دیدیم که میتونیم توسط خاصیت background-color و background-image، برای عناصرمون، به ترتیب رنگ و تصویر پس زمینه تعریف کنیم.
خاصیت های زیر، نقش خاصیت های کمکی رو برای ما بازی میکردن:
- background-repeat: تکرار تصویر پس زمینه در راستا های مختلف صفحه
- background-position: تعیین موقعیت تصویر پس زمینه نسبت به صفحه
- background-attachment: تعیین ثابت بودن و یا متحرک بودن تصویر پس زمینه در حالت اسکرول شدن صفحه
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزشها دارین، خیلی خیلی خوشحال میشیم که اون رو در بخش دیدگاههای پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی
118 پاسخ
سلام مرسی بابت آموزش عالی
جواب پایان ترم:
background-image:url(‘image-name’);
background-repeat:no-repeat;
background-position:left;
background-image:url(‘image-name’);
background-repeat:no-repeat;
background-position:right;
background-attachment:fixed;
سلام. خوشحالیم که آموزش ها مفید بوده 🙂
یه ایراد اساسی داره هنوز داره این پاسخ. به الگوی تکرار تصویر دقت کنید.
ببخشید من میخوام بک گراند فقط 2تا ازش تکرار بشه اونوقت باید چه کدی رو بزنم؟
دو بار استفاده کنید.
Background-attachment:fixed چون نوشته با عکس حرکت نمی کرد
و تکرار تصویر در ستون وردیف که به طور پیشفرض انجام میشه
باسلام و تشکر از شما. برای لینک دار کردن عکس لوگوی سایت از چه کدی در CSS باید استفاده کرد؟ یعنی وقتی روی لوگو کلیک میشه، به صفحه اصلی سایت هدایت بشیم. درست مثل سایت خودتون
سلام حامد
از css استفاده نمیشه بلکه از تگ a در html استفاده میشه
و باید تگ img داخل تگ a باشه.
سلام وقت بخیر
من یک متنی رو بهش بکگراند دادم ولیمیخواهم که این بکگراند فیت و فیت این متن باشه باید از چه کدی استفاده کنم؟
سلام
باید از padding و margin استفاده کنی.
همینطور از height و width
سلام وقت بخیر
من توی css به background عکس میدم ولی وقتی صفحه رو اجرا میکنم هیچ عکسی نمیاد
اینجوری مینوسمش:
background: url(‘mypic.jpg’);
بعد عکسم تو هیچ پوشه ای هم نیست تو پوشه گذاشتم و ادرسم مثل این:
(‘image/mypic.jpg’)
دادم باز لود نمیشه!
دوباره اومدم با background-image امتحان کردم باز هیچ عکسی لود نمیشه
دلیلش چی میتونه باشه؟
سلام
یا ادرس عکس اشتباه هست
یا کلاس یا ای دی که میدی اشتباه هست
سلام چطور می تونم روی بک گراند یه تصویر قرار بدم و پوزیشنش وسط بک گراند باشه ؟ تقریبا مثل همین صفحه:
https://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
سلام
بهش اول یک width بده و بعد
margin: 0 auto;بده
سلام .
میخواستم این عکسو تو بک گراند قرار بدم مثل خیلی از سایتا برای لایگینشون یه عکس کنار دارن شکل اینجاس که عناصر میان روش چکنم؟
سلام رادین. ببین دقیقا متوجه سوالت نشدم چون عکسی از چیزی که میخوای آپلود نشده.
ولی فکر کنم منظورت یک عکس بک گراند تمام صفحست. این موضوع رو تو مقاله مثال های بیشتر از پس زمینه در CSS توضیح دادیم میتونی مطالعه کنی.
سلام و عرض ادب خدمت شما . من یه وبلاگ ساختم تو بیان میخوام پس زمینه رو گیف بذارم ولی طوری که روی مطالب و نوشته های سایت پس زمینه گیف اعمال نشه چون نمیشه خوندش . وبلاگم مثل وبلاگ شما یه صفحه اصلی که متن هست داره و حاشیه که اینجا خاکستری هست داره من میخوام اون حاشیه رو تغیر بدم که رو متن تاثیر نذاره . یه مورد دیگه اینه که صفحه اصلی وبلاگ من مطالب رو به صورت پنجره ای تقسیم بندی کرده و باید کلیک کرد روی هر بخش تا خوندش . من چه کدی رو باید تغیربدم که فقط صفحه اصلی تغیر کنه و هر پنجره که باز میشه و داخلش مطلب هست پس زمینه اش عوض نشه . من وبلاگمو لینک کردم اگه ممکنه راهنمایی ام کنید خیلی ممنونم
سلام
به یک طراح دسترسی بدید تا سایت شما رو بررسی کنه و نیازهایی که دارید رو اعمال کنه. میتونید در سایت پونیشا یا انجام میدم طراح پیدا کنید.
سلام وقتتون بخیر
ببخشید چطوری میشه تو سایت بخش دیدگاه و اضافه کرد
شبیه به بخش دیدگاه سایت خودتون.
ممنون
سلام مازیار. خب کلی راه وجود داره برای انجام این کار 🙂
اولین قدم اینه که وب سایت مورد نظرت چه نوع وب سایتیه؟ وردپرسی یا اختصاصی؟ و متناسب با اون باید تصمیم بگیری.
سلام وقت بخیر
من یک متنی رو بهش بکگراند دادم ولیمیخواهم که این بکگراند فیت و فیت این متن باشه باید از چه کدی استفاده کنم؟
سلام سعید وقت شمام بخیر. ببخش اگه یکم دیر جواب میدم.
به خود متن بک گراند دادی؟ یا به عنصری که متن داخلشه؟
اگه حالت دومه که میتونی از background-size: cover استفاده کنی.
سلام خسته نباشین من میخواستم یه صفحه بسازم با یک بکگراند ثابت و محتوای اسکرول شونده ولی این رو نتونستم یاد بگیرم اگه ممکنه کدش رو بدید تا یاد بگیرم ممنون
سلام
کدهای css رو پیوست کردم
ممنون از آموزش خوبتون
سلام حسين. ممنون از پاسخت، ولي يه خاصيت ديگه هم نياز داريم بنويسيم، اگه دقت كني بك گراند در دو جهت تكرار شده
منظورتون background-repeat هست؟
به طور پیش فرض اگه نوشته نشه بکگراند ما در دو جهت تکرار نمیشه؟
درسته حسین، منظور دقیقا background-repeat هست. اگه تکرار نشده بک گراندت حتما باید بنویسیش. در هر صورت پاسخی که نوشتی کاملا درسته و تو اکادمی میزفا جایزت رو دریافت میکنی😃
سلام خدمت اساتید محترم سایت پر مطلب میزفا ؛
در قسمت پایان ترم ، اگر پوزیشن عکس را به مقدار فیکس تنظیم کنیم باز هم درست است یا فقط با تنظیم فیکس background-attachment بدون حرکت میمونه ؟!
سلام محمدطاها. بله میشه ولی راه استانداردی به حساب نمیاد. علت های مختلفی هست که دو تا از اون ها عبارتند از:
1. background-attachment مستقیما روی تصویر بک گراند تاثیر داره، اما position: fixed فقط روی عناصر. مثل div، img و …
2. مسلما در این حالت مجبوری با هم پوشانی عناصر سر و کله بزنی. مثلا یک عکس با عنصر img رو position:fixed میکنی، ولی ممکنه روی محتوات رو بگیره که اینجا باید از دستور z-index استفاده کنی.
و یک سری دلیل دیگه.
اما اگه مجبور شدی چرا که نه 😃 من خودم یک بار مجبور شدم بک گراند یکی از وب سایت هام رو اینطوری پیاده کنم. مشکلی هم نداشت جز یکم کد بیشتر زدن.
ولی در کل پیشنهاد میکنم که اول روش گفته شده رو بررسی کنی و وقتی دیدی هیچ جوره نمیشه، سراغ این روشای فرعی بری.
سلام ممنونم برای مقاله های خوبتون فقط تعجب کردم سایت با این مقاله های جامعش چطوری انقد سریع از بک گراند ها رد شده بک گراند سایز و بک گراد کلیپ و اوریجین و کانتنت رو اشاره ای بهش نکرین!
سلام مهدی.
مثال های کاربردی درباره بکگراند در جلسه بعدی زده شده. میتونید جلسه مثال های بیشتر پس زمینه در CSS بخونید.
اگر موردی هست که درباره سایز اورجین و … نگفتیم بفرمایید تا مقاله رو بهبود بدیم.
با سلام. از سایت خوب و آموزندتون بسیار سپسگذارم. من برای عکس پس زمینه ام دچار مشکل شده ام و میخوام بتونم اندازه عکس رو خودم تنظیم کنم و فاصلش از بالا و کنار رو تنظیم کنم. میشه لطفاً راهنماییم کنید
ممنون
اسی
سلام اسی.
margin در css و padding در css میتونه بهت کمک کنه.
با سلام.سایت خوب وآموزنده ای دارید لطفا” من فایل های اچ دی ام ال ئ سی اس اس رو باتون گذاشتم ببینید که علت اینکه فایل صوتی من اجرا نمیشه چیه و توضیح بدید که چطوری رفعش کنم؟
ممنون
احسان
music
سلام احسان. خواهش میکنیم.
دلیلش ساده و ریزه، اونم اینه که تگ img قبل از تگ audio رو نبستی 🙂
*{
background-image: url(logo.jpg);
Background-attachment:fixed;
}
درسته مهدی. مرسی 🙂
سلام ممنون از سایت خوبتون. ببخشید قضیه اون نوشته چیه که از بالا میاد عبور میکنه منظورم بخش چلنجتون کد html شو بلد نیستم هر کاری کردم اون طوری نشد اما برایattachment background از حالت fixed استفاده کردم و عکسم بدون تکرار کردم فقط اون نوشته موند میشه راهنمایی کنید؟
سلام
عالی بود ، ممنون
سلام امین جان، خواهش میکنم
خیلی خوشحالیم که برات مفید بوده 🙂
سلام خسته نباشین . من یک صفحه css و یک زمینه این شکلی و فقط به صورت کد نیاز دارم / میشه راهنمایی بفرمایین؟ فقط یک عدد عکس و یک نوشته فونت بزرگ و پایین نوشته سایز کوچیک و قرار دادن لینک روی کل صفحه ک روش کلیک کنن لینک باز شه همین طوری نیاز دارم…..
سلام امید.
راهنمایی یعنی کد رو بدیم؟ خب این راهنمایی نمیشه. ما نزدیک به ۵۰ مقاله نوشتیم تا یک راهنمایی خوبی باشه برای دوستان.
اگر کد اختصاصی خودتون نیاز دارید و هدف یادگیری ندارید بدید به یک برنامه نویس براتون کدش رو بزنه.
یا لطفا سرچ کنید background generator css و خودتون یک بررسی کنید. همینطور درباره رنگ های gradients در بکگراند تحقیق کنید چون در عکس استفاده شده.
موفق باشید.
سلام من میخوام بک گراندم بالا و پایینش رو به داخل کمان دار بشه .باید چه کار کنم ؟
سلام
اینا رو نمیشه اینطوری جواب داد که. باید کدها رو دید. سوال دقیق بپرسید و با کد بگید.
سلام
من به main بکگراند طوسی دادم و داخل main یک تگ h2 و سه تا باکس هست . ( h2 در ردیف اول و باکس ها در ردیف دوم main قرار دارند )
وقتی به main ، ارتفاع auto میدم و بعد برای h2 و اون سه تا باکس css مینویسم ، بکگراند طوسی فقط برای h2 نمایش داده میشه و پشت باکس ها بکگراند نمیفته ولی وقتی به main ارتفاع مشخص میدم این مشکل حل میشه ، آیا راهی هست که ارتفاع main همون auto بمونه و پشت باکس ها هم بکگراند طوسی مشخص باشه ؟
سلام مهرداد
سوالت خیلی کلیه، باید حتما کداتو دید و نظر داد
در حالت عادی نباید اینطور اتفاقی بیفته، مگه اینکه عنصرت رو از ترتیب بندی صفحه بیرون ببری. مثلا از خاصیت position استفاده کنی.
ممنون
البته یادم رفت که بگم به باکسها float:left دادم تا کنار هم قرار بگیرن ، قبل از float دادن مشکلی نیست و بکگراند درسته ولی بعد از float دادن این مشکل پیش میاد
خب پس همون 🙂 راه های متفاوتی برای حل این مشکل هست. ساده ترینش استفاده از دستور overflow: hidden برای عنصر main هست. از دستوراتی مثل clear هم میتونی استفاده کنی.
برای مطالعه بیشتر به این لینک راهنماییت میکنم: http://colinaarts.com/articles/the-magic-of-overflow-hidden
خیلی ممنونم
لطف کردی
سلام
عالی مثل همیشه… 🙂
فقط یه سوال ضایع 😁
جواب اون سوال پایان ترم رو باید به کدوم ایمیل بفرستم؟ 🤔
سلام معین 🙂
تو همین قسمت نظرات پاسخ رو بفرست
من 5 تا عکس دارم و مخواستم از چپ به راست حرکت کنند و بعد عکس پنجمی باز عکس اولی بیاد یعنی تکرار بشه با انمیشن css این کار مکنم ولی نمی دونم چجوری بعد عکس پنچمی عکس اولی بیاد. چجوری متناوب حرکت کنند؟!
سلام امیر.
فکر میکنم این نیاز به جاوااسکریپت داره و یا باید از css پیشرفته استفاده کرد. با خود css کار سختی هست هر چند در لینک زیر این کار کردن و میتونی ایده بگیری:
https://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
سلام خدکت شما و عرض خسته نباشید
من میخوام به بک گراند کالرم قابلیت چند رنگی بدم مثل کادر های پاور پوینت باید چه کار کنم؟ممنون
سلام سینا.
میتونی از این نمونه کدها استفاده کنی. رنگش رو خواستی عوض کن خودت:
سلام
من یه بک گراند برای وبم انتخاب کردم ولی چون قسمت هدر و پستها رنگ بکگراندشون سفید هست برای همین بک گراند اصلیه صفحه دیده نمیشه . چیکار کنم که بکگراند هدر و پستها از حالت سفید به بی رنگ تبدیل بشه تا بکگراند اصلی مشخص باشه ؟
سلام میتونین مقدار background رو روی None قرار بدید
سلام لیلی
اگه درست متوجه شده باشم برای پست ها و قسمت هدر خودت بک گراندی رو تنظیم کردی که روی بک گراند کلی وب رو گرفته.
چون هیچ عنصری به صورت پیش فرض بک گراند نداره. البته اگه هم به بک گراند نیاز داری و هم میخوای که بک گراند کلی وب هم مشخص باشه میتونی از ()rgba استفاده کنی که دارای یک بک گراند شفاف باشی. میتونی در موردش تو جلسه ۱۴ – مثال های بیشتر پس زمینه و مثال دوم بیشتر مطالعه کنی.
سلام
من یه بک گراند برای وبم انتخاب کردم ولی چون قسمت هدر و پستها رنگ بکگراندشون سفید هست برای همین بک گراند اصلیه صفحه دیده نمیشه . چیکار کنم که بکگراند هدر و پستها از حالت سفید به بی رنگ تبدیل بشه تا بکگراند اصلی مشخص باشه ؟
سلام لیلا.
میتونی به جای دادن رنگ، حالت transparent انتخاب کنی.
مثلا چنین کدی:
سلام خدمت استادان بزرگوار خسته نباشید ، من یک گالری داخل صفحه دارم که عکس هاش سایز های مخلفی دارن با کلیک بر روی عکس های بزرگتر ،قسمت اضافی عکس ها در راستای عمودی از روی عناصر دیگه و کادر خارج میشن . سوال چکاری باید انجام بدم که با بزرگ شدن عکس ،متن ها و کادر ها به صورت اتوماتیک جابجا بشن و تداخل بین عناصر دیگه صفحه بوجود نیاد وبک گراندم هم تغییر سایز بده .اینو جواب بدید خیلی کارمو راه انداختید.
سلام محمدرضا جان
خب این مسئله خیلی کلیه، چون عناصر هر کدوم یک موقعیت مشخص دارن و باید با تغییر سایز هر عنصر دیگه وارد موقعیت جدیدی بشن.
به همین علت بستگی داره که عناصرت تو چه نظم و ترتیبی قرار گرفتن. ساده ترینش اینه که به صورت ستونی زیر هم باشن که در این صورت اگه ارتفاع یکیشون زیاد شه عناصر بعد از اون پایین میرن (البته در حالتی که position اونها absolute نباشه)
اما اگه نظم پیچیده تری داشته باشن، مثلا در راستای عمودی و افقی به صورت نامنظم چیده شده باشن (که طبیعتا بخاطر سایز متفاوت عکس ها همینطوره) اون موقع باید از طراحی واکنش گرا یا Responsive design استفاده کنی و روش های flexbox و grid رو مورد بررسی قرار بدی.
سلام میخواستم به عکس زمینه یک باکس فیلتر بدم ولی تمام محتویات داخل باکسم فیلتر روشون اعمال میشه راهی نیس فقط روی عکس زمینه اعمال شه؟
سلام یکی از راه ها این هستش که دوتا Div تو در تو ایجاد کنید و یک کلاس به پس زمینه بدید و فقط روی اون کلاسی که پس زمینه هستش فیلتر را اعمال کنید. موفق باشید.
ببخشید من درون سایتم برای پس زمینه از یک تصویر استفاده کردم و درون صفحه بدون اینکه من کاری کنم چنت تایی شده بود من چکار کنم تا ان تصویر درون صفحه چندتایی نشود ؟
باید از background-repeat استفاده کنی و مقدارش رو no-repeat بزاری
سلام
خسته نباشید….
چند تا نوشته دارم میخوام وقتی روی اولی میزنم بقیش ناپدید بشه
چیکار باید کنم؟
برای ناپدید شدنشون باید چیکار کرد؟
برای اینکار میتونین از کد های Jquery استفاده کنید.
این نمونه نمایش و پنهان کردن محتوا رو مشاهده کنید.
با سلام خدمت اساتیت محترم
کادری دارم که با اضافه کردن متن ،کادر از حالت قبلی، سایزش تغییر میکنه
میخاستم تغییری در سایز کادر ایجاد نشه
سلام میلاد جان ،
برای اینکار شما باید width و height برای کادر هات مشخص کنی که یک ارتفاع و عرض مشخصی داشته باشند.
بعد از مشخص کردن اینها مطمئنا دیگه مشکلی که گفتی برات پیش نمیاد. فقط این رو بگم برای ریسپانسیو کردن باید نسبت به سایز این ارتفاع و عرض رو تغییر بدی. موفق باشی.
سلام میشه برای صحفه وب بک گراند و هم عکس گذاشت هم رنگ؟؟؟
سلام طلوع عزیز، بله میتونی با استفاده از یک گرادینت که تو نظرات هم بهش اشاره کردیم، این کار رو انجام بدی و هم تصویر داشته باشی هم رنگ.
سلام من میخوام یک عکس بک گراند بزارم بعدش ی لایه مشکی کم رنگم روی همون عکس بزارم میخواستم این کارو بعد از اینکه ادرس عکس رو دادم انجام بدم این نمونه کدیه که خودم ازش یادمه ولی کار نمیکنه
background: url(‘https://…’),rgba(0,0,0,0.2);
میشه راهنمایی کنید
سلام روز بخیر.
این مدلی که شما مد نظرتونه رو بهش میگن استفاده از چند بک گراند، متاسفانه نمیتونید از rgba به صورت مستقیم استفاده کنید. پیشنهاد من اینه که از linear-gradient به جاش استفاده کنید.
مثلا کد زیر میتونه جوابتون باشه :
/* Working method */ .tinted-image { background: /* top, transparent red, faked with gradient */ linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), /* bottom, image */ url(image.jpg); }امیدوارم براتون مفید باشه ، موفق باشید.
سلام مرسی.
ممنونم از پاسختون خیلی دنبالش بودم…
با آروزی موفقیت برای شما
سلام مجدد ، خواهش میکنم خوشحالم که تونستم کمکت کنم.
سلام
میخام بک گراندهدرسایتم رو عکس بزارم لطفاکمکم کنید ** میشه داخل واتساپ بگین چیکارکنم
چرامیام نام نویسی کنم داخل سایتتون میگه رمزورودت اشتباه شده
سلام وقت بخیر.
مشکلی دارید همین جا مطرح کنید تا راهنمایی کنیم.
در میزفا محیطی برای ثبت نام وجود نداره. اگر منظورتون آکادمی میزفا هست که میتونید در منو ثبت نام کنید و اگر پسورد خودتون فراموش کردید، فراموشی پسورد بزنید.
موفق باشید.
سلام
میشە بکگراند خودمون طراح کنیم و در فیسبوک قسمت color backgrand اضافه کنیم؟
سلام نه نمیشه
با این حال فیسبوک خودش این امکان اپلود عکس داره
سلام خسته نباشید.
من میخواستم دوتا بک گراند در صفحه ی وبم داشته باشم و هر دو تصویر جداگانه که اولیو گذاشتم و بالای صفحه بک گراند اومد حالا میخوام پایین صفحه هم یک بک گراند وسط صفحه بیفته اگه میشه بهم راهنمایی کنید از چ دستوری باید استفاده کنم و چ کد های رو درhtmlو cssوارد کنم
متشکرم.
سلام هلیا.
شما میتونید از دستور background-image یک بار برای بخش اول استفاده کنید و یک عکس مثلا بهش بدی و همین کار رو برای بخش دوم انجام بده.
سلام
من هر چی بکگراند ایمیج در css میزنم مرورگر هیچی نشون نمیده کدها همه درستن
سلام محسن. وقتی نمایش نمیده پس چطوری همه کدها درستن؟
سلام منم همین مشکل رو دارم
شاید مشکل شما تو فرمت تصویر باشه ممکنه بجای png مثلا jpg زدین
منم این مشکلو داشتم عکس رو با paintویندوز فرمتشو عوض کن و بزار gif.درست میشه
بعیده از فرمت باشه. اصولا jpg و png فرمت هایی هستند که همه جا پشتیبانی میشه.
سلام.
عکستون باید توی پوشه سایتتون باشه یا یه فولدری که کنار فایل html یا php سایتتون قرار داره در نهایتم با css میتونین به این صورت عمل کنید
#id{background: url(‘images/image.png’);}
موفق باشید.
سلام چطور میتونم رنگ زمینه یک نوشته را تا اخر سطر ادامه بدم
سلام فرهاد جان روز بخیر،
اگر میخواهی حتما از تگ p برای نوشته هات استفاده کنی. میبایست درون تگ های p از یک تگ زیر مجموعه به نام mark استفاده کنی تا بخشی که میخواهی زمینه اش رو با ویژگی background تغییر بدی، تغییر کنه.
من نمونه هایی از چیزی که فکر میکنم منظورت هست رو داخل لینک زیر برات قرار دادم که شاید به دردت بخوره.
https://jsfiddle.net/ensqkbxz/
با اینحال اگر بازم من منظورت رو درست متوجه نشدم، حتما بگو که راهنماییت کنم.
موفق باشی…
سلام و عرض خسته نباشید
یه سوال داشتم
من میخواستم یه متنی مثلا لینک های بالای صفحه که شامل خانه، ارتباط با ما و از این امثال لینک ها هستش رو روی بک گراند بالای صفحه ام قرار بدم درحالی که این اتفاق نمیوفته و این متن ها در پایین عکس زمینه قرار میگیره
نمیدونم چطور این رو بیارم روی عکس خواهش میکنم کمکم کنید
سلام محدثه. بدون دیدن کدهای شما نمیشه نظر داد. پیشنهاد میکنم کدهاتون رو زیپ کنید و به کسی بفرستید دسترس شما هست.
میتونین برای اون قسمت هم پس زمینه تعیین کنی!
سلام میخواستم بدونم چطور میشه تصویر شاخص یه پست به صورت اتوماتیک به پس زمینه منتقل بشه که دیگه نخواد دستی آدرس رو در css قرار بدیم مورد مهمیه که هیچ سایتی به اون اشاره نکرده
سلام احسان. باید کدنویسی اختصاصی بشه. کدی نداره که بهتون بدم و بگم اینو بذارید نیاز شما رو رفع میکنه. پیشنهاد میکنم با یک برنامه نویس وردپرس صحبت کن. چون نمیشه برای همین هیچ سایتی هم طبیعتا نمیتونه اشاره کنه.
سلام.
اگه php بلد باشید خیلی سادس نیاز به یک دیتابیس دارید که ادرس عکس رو داخلش insert یا وارد کنید بعد از اون میتونید احرین رکورد ثبت شده از دیتابیس رو توسط php دریافت کنید و در یک متغیر ذخیره کنید حالا هم میتونین داخل تگ img پست ها از اون متغیر استفاده کنید هم در css بک گراند سایتتون رو روی همون متغیر تنظیم کنید.
موفق باشید.
اقا سلام من میخوام روی عکسم یه عنوان بک گراند دار قرار بدم اما میخوام عکس به شکل محو شده یا فرقی نمیکنه پس زمینه عنوانم به شکل محو شده روی عکس نمایش داده بشه باید چی کار کنم؟
سلام ممنون از سایت خوبتون
میخواستم بپرسم تصویرم رو چند در چند پیکسل انتخاب کنم تا وقتی یوزر اسکرول نکردی غیر اون تصویر چیزی نبینی و این اتفاق توی هر سایز مانیتوری همینطور باشه
با تشکر
سلام میلاد جان. مثلا نزدیک ۱۲۰۰ px خوبه ولی شما با css مشخص میکنید که کل صفحه رو اون عکس بگیره. البته اگر کاربر موبایل زیاد داره و لپ تاپ کمه میتونید این سایز رو کمتر کنید.
سلام خسته نباشید
میبخشید چطور مشخص کنیم که بک گراند کل صفحه رو بگیره؟ من یه عکس برا بک گراند میزارم کل عکسو نمیاره یه قسمتیرو زوم میکنه نشون میده
سلام مریم برای اینکار
height:100% weight:100% بزارید و background-size:cover بزارید.
سلام.
واقعاآموزش عالیه
فقط مثال های این جلسه بررسی شه. چند مورد جابجایی و کمبود دیدم.
با تشکر
سلام عرفان جان. یک مشکل تداخلی داشتیم. رفع شد. ممنون که توجه کردی و گزارش دادی 🙂
سلام خسته نباشید
من امروز درگیر موضوعی بودم به نتیجه نرسیدم گفتم سوال کنم ازتون اگر بتونید راهنماییم کنید
من میخوام بکراند بزارم روی تصویر تاکید میکنم روی تصویر .
نمیخوام در پس ضمینه تصویر قرار بگیره بلکه روی تصویر رو بگیره
بطور مثال عکس های سایتم در یک قاب عکس که ضمینه شفاف هست قرار بگیره اینجوری فقط کادر قاب روی تصویر نمایش داده میشه
اما در بکراند بر عکسه . ممنون میشم راهنماییم کنید . ایمیلم و براتون میزارم . مرسی و خدانگهدار
سلام دوستم. میتونید یک div بالاتر از بک گراند قرار بدید و برای div پیش زمینه تنظیم کنید و یا از ویژگی هایی مثل :after استفاده کنید. امیدوارم پاسخ من براتون مفید بوده باشه.
سلام مجدد
بله استفاده از دایو به ذهنم رسیده بود منتها مد نظر بنده نبود چون اونجوری باید تمام پستها ادیت میشدند و تگ دایو رو اضافه میکردم که امکانش نبود . از طرفی هم نمیخواستم از فایل فانکشن و هک استفاده کنم که تصاویر رو داخل دایو بزاره .
در هر صورت ممنون . و سپاس از شما
سلام. میتونید از تکنیکهای سی اس اس after و before استفاده کنید. موفق باشید.
سلام وقتتون بخیر.چطوری میتونم به عکسی که بکگرانده افکت بدم؟
سلام دوستم. اصولا با JS این کار رو میکنن. این لینک رو نگاه کنید. https://speckyboy.com/css-background-effects/
نمونه زیاد داره
سلام
من میخوام عکس بک گراندم کل صفحه رو در بگیره
از بک گراند سایز هم پیش رفتم اما نشد
مشکل کجاست؟؟؟!!!
سلام. باید طرح رو ببینیم تا بتونیم بهتر کمک کنیم.
Background-size:cover
سلام خسته نباشید ببخشید میشه راهنماییم کنید خیلی ممنون میشم
من یک قالب دیدم یک عکسی هست و روی عکس یک تار مار موقعه تحرک کردن موس این تار که روی عکس هست حرکت میکنه نمیدونم اسمش چیه که تو گوگل سرچ کنم ایا اموزشش دارید نمونه ببنید
**
خواهشن کمک کنید
سلام. اسمش رو دقیق نمیدونم ولی به اینا اصولا canvas میگن یعنی با canvas ساخته میشن و میتونید در سایت codepen.io به دنبال چنین چیزهایی باشید.
محتوای سایتتون واقعا کامله …
عالی بود ممنون..
خواهش میکنم دوستم.
باسلام،خیلی ممنون از مطالب خوبتون.
چجوری میتونیم یک کثلث زیر منو ایجاد کنیم؟
سلام. در لینک زیر یک نمونه برای ساختن مثلث اشاره کرده. امیدوارم براتون مفید بوده باشه.