logo
logo
تبلیغ کلیکی تاپ سایت 98

عکس پس زمینه با html و css

عکس پس زمینه با html و css
هدایت عباسی آموزش CSS

در این بخش از آموزش CSS از تاپ سایت 98 قصد داریم به عکس پس زمینه با html و css بپردازیم. قرار دادن عکس پس زمینه برای کل صفحه یا بخشی از صفحه ، بک گراند تمام صفحه با HTML,CSS و آموزش گذاشتن بک گروند در css.

قرار دادن عکس پس زمینه

برای قرار دادن عکس پس زمینه از دستور background-image استفاده می کنیم.

در مثال زیر یک div ایجاد کرده ایم که ارتفاع آن 300 پیکسل است.

سپس با دستور background-image عکس پس زمینه را قرار داده ایم.

مثال

کد html,css زیر را در یک فایل با پسوند html قرار دهید.

سپس یک عکس بنام a1.jpg در کنار فایل html قرار دهید اگر نام یا پسوند فرق می کند آن را بجای a1.jpg بگذارید.

حالا فایل html را اجرا کرده و نتیجه را ببینید.

سعی کنید 3 عکس بزرگ ، متوسط و کوچک داشته باشید و با هر 3 عکس تست کنید.

مشاهده می کنید که عکس پس زمینه div تغییر می کند.

اگر عکس پس زمینه (background) دارای سایز کوچکتر از div باشد عکس تکرار می شود تا کل div را بپوشاند.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 300px;
background-image: url("a1.jpg");
}
</style>
</head>
<body>
<div>
<h1>TopSite98.com</h1>
</div>
</body>
</html>

بک گراند تمام صفحه در html و css

برای قرار دادن عکس پس زمینه یا بک گراند تمام صفحه در html و css می توانیم مانند مثال زیر عمل نماییم.

با دستور background-image می توانیم برای body ، عکس مناسب قرار دهیم.

مثال

در مثال زیر در بخش style ، برای body و با استفاده از دستور background-image ، عکس پس زمینه را مشخص می کنیم.

همان طور که مشاهده می کنید عکس تمام صفحه html را پوشانده است.

اگر عکس کوچک باشد آنقدر تکرار می شود که کل صفحه html را بپوشاند.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-image: url("b2.jpg");
}
</style>
</head>
<body>
<div>
<h1>TopSite98.com</h1>
</div>
</body>
</html>

آموزش گذاشتن بک گروند در css

حال به آموزش گذاشتن بک گروند در css می رسیم.

برای بک گروند می توانیم هم از عکس و هم از رنگ استفاده کنیم.

در مثال زیر ما برای پس زمینه تمام صفحه از رنگ آبی و برای div از رنگ orangered استفاده کرده ایم.

مثال

کد html,css زیر را در یک فایل html قرار داده و اجرا نمایید.

خروجی پس زمینه یا بک گروند آبی برای کل صفحه html و رنگ orangered برای div خواهد بود.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: blue;
}
div{
height: 200px;
background-color: orangered;
}
</style>
</head>
<body>
<div>
<h1>TopSite98.com</h1>
</div>
</body>
</html>

تغییر اندازه عکس پس زمینه با html و css

برای تغییر اندازه عکس پس زمینه با html و css مثالی می زنیم.

با دستور background-repeat می توانیم عکس را تکرار کنیم یعنی اگر عکس پس زمینه کوچک باشد در حال پیش فرض آن قدر تکرار می شود تا کل صفحه html را بپوشاند.

اما با دستور background-repeat می توانیم آن را تنظیم کنیم. این دستور دارای ویژگی های مختلفی است که با هم بررسی می کنیم.

من یک عکس 500 در 500 انتخاب کرده ام و نام آن را b2.jpg گذاشته ام.

مثال

یک فایل html ایجاد کرده و کد html,css زیر را در آن قرار دهید.

عکس b2.jpg با سایز حدود 500 در 500 را کنار فایل html قرار دهید.

حال ویژگی را تک به تک تست نمایید.

در مثال زیر من برای دستور background-repeat ویژگی no-repeat را قرار داده ام در این صورت عکس فقط یک بار در پس زمینه قرار داده می شود و مابقی صفحه سفید خواهد بود.

ویژگی repeat-x ، عکس را در جهت x قرار می دهد و تکرار می کند تا کل عرض صفحه را بپوشاند.

بجای no-repeat ویژگی repeat-x قرار دهید.

ویژگی repeat-y ، عکس را در جهت y قرار می دهد و تکرار می کند تا کل ارتفاع صفحه را بپوشاند.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-image:url("b2.jpg");
background-repeat: no-repeat;
}
div{
height: 200px;
background-color: orangered;
}
</style>
</head>
<body>
<div>
<h1>TopSite98.com</h1>
</div>
</body>
</html>

امیدواریم این آموزش برای شما مفید باشد.

برای مشاهده همه آموزش های HTML و CSS کلیک کنید : آموزش کامل CSS  - آموزش کامل HTML

موفق باشید.

عزیزانی که تمایل دارند به تیم نویسندگی تاپ سایت 98 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98
دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.