You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.9 KiB
65 lines
1.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>css background</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: #efefef;
|
|
background-image: url('some sourse');
|
|
background-repeat: no-repeat;
|
|
background-repeat: repeat-x;
|
|
background-repeat: repeat-y;
|
|
background-position: right;
|
|
background-position: top right;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
header {
|
|
width: 100%;
|
|
background-image: url('some File');
|
|
height: 400px;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
background-clip: border-box;
|
|
}
|
|
|
|
.test {
|
|
background: #f4f4f4 url('something') no-repeat center/center cover;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<!--
|
|
background
|
|
میتواند هم رنگ داشته باشد و هم تصویر و اگر که تصویر لود نشد کمک رنگ را استفاده میکند
|
|
background-attachment:
|
|
افکت پارالکس ایجاد میکند وهر چه صفحه اسکرول بخورد عکس صابت است.
|
|
background-clip: border-box;
|
|
پیشفرض است
|
|
background-clip: padding-box;
|
|
محدوده ی بوردر را جزو پس زمینه حساب نمیکند
|
|
پدینگ بوردر نسبت به محتوای داخلی باکس
|
|
background-clip: content-box;
|
|
پس زمینه فقط به محتوا اعمال میشود و شامل پدینگ و حاشیه نمیشود
|
|
|
|
short hand for background:
|
|
background: color imgageUrl backgroundRepeat backgroundPisition
|
|
-->
|
|
<header>
|
|
|
|
</header>
|
|
</body>
|
|
|
|
</html> |