تصویر پس زمینه در HTML

تنظیم تصاویر پس زمینه HTML

می توان یک تصویر پس زمینه را برای هر عنصر HTML تعیین کرد،یعنی شما می توانید به هر عنصر دلخواه در صفحه، یک تصویر پس زمینه الصاق کنید.

نحوه قرار دادن تصویر پس زمینه (background)در یک عنصر HTML

برای افزودن تصویر پس زمینه به عنصر HTML ، از ویژگی
HTML style
و ویژگی
CSS background-image
استفاده میکنیم.

صفت 
background
 صفتی است که ما با استفاده از آن میتوانیم یک تصویر/عکس را برای پس زمینه صفحه تنظیم نماییم.

افزودن تصویر پس زمینه به عنصر HTML:
 

<div style="background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg');">

مثال

<h2>تصویر پس زمینه</h2>
<p>:تصویر پس زمینه برای عنصر div</p>
<div style="background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>

نتیجه: 

برای اینکه تصویر پس زمینه تان به سایز دلخواه نشان داده شود میتوانید از ویژگی height و width استفاده کنید.
اما در این مثال از عنصر br یا خطوط اضافه برای تغییر سایز تصویر استفاده شده و هرچه بیشتر از آن یا متن به همراه عنصر br استفاده شود مقدار بیشتری از تصویر قابل مشاهده میباشد.

برای آشنای با ویژگی عرض و ارتفاع (width و height)  میتوانید به آموزش زیر مراجعه کنید:

ویژگی و صفات HTML

همچنین می توانید تصویر پس زمینه را در عنصر <style> ، در بخش <head> مشخص کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div {
 background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg');
}
</style>
</head>
<body>

قرار دادن تصویر پس زمینه بصورت تمام صفحه با HTML

اگر می خواهید کل صفحه دارای تصویر پس زمینه باشد ، باید تصویر پس زمینه را در عنصر <body> مشخص کنید:

<style>
body {
 background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg');
}
</style>

مثال

<style>
body {
 background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg');
}
</style>
<h2>سلام</h2>
<p>ما ارائه دهنده خدمات هاستینگ در آپ وب هستیم</p>

نتیجه

عدم تکرار تصویر پس زمینه

برای جلوگیری از تکرار تصویر پس زمینه ، خاصیت تکرار پس زمینه
(background-repeat)
را روی بدون تکرار
(no-repeat)
قرار دهید.

مثال

<style>
body {
 background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg');
 background-repeat: no-repeat;
}
</style>
<h2>سلام</h2>
<p>ما ارائه دهنده خدمات هاستینگ در آپ وب هستیم</p>

نتیجه

کاور پس زمینه در HTML

اگر می خواهید تصویر پس زمینه کل عنصر  و صفحه پس زمینه متن را را پوشش دهد ، می توانید ویژگی اندازه پس زمینه
(background-size) را برای cover تنظیم کنید.

همچنین ، برای اطمینان از اینکه تمامی عناصر همیشه کاور شده اند ، ویژگی پیوست پس زمینه
(background-attachment) را روی fixed تنظیم کنید:

به این ترتیب ، تصویر پس زمینه نسبتهای اولیه خود را حفظ می کند:

مثال

<style>
body {
 background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg');
 background-repeat: no-repeat;
 background-attachment: fixed; 
 background-size: cover;
}
</style>
<h2>سلام</h2>
<p>ما ارائه دهنده خدمات هاستینگ در آپ وب هستیم</p>

نتیجه

تصویر پس زمینه Stretch در HTML

کشش تصویر پس زمینه

اگر می خواهید تصویر پس زمینه کشیده شود تا متناسب با کل عنصر باشد ، می توانید ویژگی background-size را  تنظیم کنید:

مثال

<style>
body {
 background-image: url('https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg');
 background-repeat: no-repeat;
 background-attachment: fixed; 
 background-size: 100% 100%;
}
</style>
<h2>سلام</h2>
<p>ما ارائه دهنده خدمات هاستینگ در آپ وب هستیم</p>

نتیجه

اندازه پنجره مرورگر را تغییر دهید ، خواهید دید که تصویر کشیده می شود ، اما همیشه کل عنصر را می پوشاند.