100% کامل شده تا

تصاویر پس‌زمینه در اچ‌تی‌ام‌ال (HTML Background Images)

از موتو کد، دانشنامهٔ برنامه‌نویسی


یک تصویر پس‌زمینه را می‌توان تقریباً به همهٔ عنصرهای HTML اختصاص داد.[۱]


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

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

مثال

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

<div style="background-image: url('img_girl.jpg');">

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<p>A background image for a div element:</p>

<div style="background-image: url('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.
</div>

<p>A background image for a p element:</p>

<p style="background-image: url('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 p 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.
</p>

</body>
</html>

Responsive demo.svg


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

مثال

تصویر پس‌زمینه را در عنصر <style> تخصیص دهید:

<style>
div {
  background-image: url('img_girl.jpg');
}
</style>

مثال

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-image: url('img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<div>
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.
</div>

</body>
</html>

Responsive demo.svg



تصویر پس‌زمینه در یک صفحه (Background Image on a Page)

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

مثال

یک تصویر پس‌زمینه را برای یک صفحه HTML اختصاص می‌دهد:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

مثال

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

</body>
</html>

Responsive demo.svg



تکرار پس‌زمینه (Background Repeat)

اگر تصویر پس‌زمینه کوچکتر از عنصر باشد، تصویر به صورت افقی و عمودی خود را تکرار می‌کند تا به انتهای عنصر برسد:


مثال

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

مثال

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Repeat</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

</body>
</html>

Responsive demo.svg


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

مثال

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

مثال

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h2>Background No Repeat</h2>

<p>You can avoid the image from being repeated by setting the background-repeat property to "no-repeat".</p>

</body>
</html>

Responsive demo.svg



جلد پس‌زمینه (Background Cover)

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

همچنین، برای اطمینان از اینکه همیشه کل عنصر پوشش داده می‌شود، خصوصیت background-attachment را برابر با fixed تنظیم کنید:

مثال

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

مثال

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>
</head>
<body>

<h2>Background Cover</h2>

<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the body element.</p>

</body>
</html>

Responsive demo.svg



کش آمدن پس‌زمینه (Background Stretch)

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


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

مثال

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

مثال

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>
</head>
<body>

<h2>Background Stretch</h2>

<p>Set the background-size property to "100% 100%" and the background image will be stretched to cover the entire element, in this case the body element.</p>

</body>
</html>

Responsive demo.svg



در مورد سی‌اس‌اس بیشتر بیاموزید (Learn More CSS)

از مثال‌های بالا آموخته‌اید که تصاویر پیش زمینه را می‌توانید با استقاده از خصوصیت‌های پس‌زمینه CSS استایل دهی کنید.

برای کسب اطلاعات بیشتر در مورد ویژگی‌های پس‌زمینهٔ CSS، آموزش پس‌زمینه در CSS را مطالعه کنید.

منابع آموزشی




به‌روزرسانی شده: ۳۷ روز پیش