مشکل با تغییر اندازه بک گراند صفحه [بایگانی]

white tower

شنبه 26 بهمن 1392, 19:34 عصر

استایل زیر رو ببینید

width: 1250px;
margin: auto;
background-color: #184c55;
background: -webkit-radial-gradient(400px 400px,#3cbfd6,#000101);
background: -moz-radial-gradient(400px 400px,#2f9fb2,#000101);
background-repeat:repeat-y;
background-size: cover;
وقتی زرولوشن صفحه رو می ذارم 1024*768 صفحه اسکرول افقی میشه.همه چی درسته ولی بک گراند صفحه فقط به اندازه صفحه نمایش می مونه و وقتی اسکرول به سمت راست می کنم بک گراند سقیده.اگر گرادینت رو بردارم بک گراند ساده و یه رنگ کل صفحه رو می پوشونه ولی می خوام گرادینت صفحه رو پر کنه.امیدوارم منظورم رو رسونده باشم.یعنی 1250px رو پر کنه.

refugee

شنبه 26 بهمن 1392, 20:33 عصر

سلام اندازه عرض را بذارید 100٪

نمونه :

<!DOCTYPE html>
<html>
<head>
<title>Asila Design Group</title>
<meta charset="utf-8" />
<style type="text/css">
*{margin:0px; padding:0px;}
.container {
width: 100%;
height:768px;
background-color: #184c55;
background: -webkit-radial-gradient(400px 400px,#3cbfd6,#000101);
background: -moz-radial-gradient(400px 400px,#2f9fb2,#000101);
background-repeat:repeat-y;
background-size: cover; }
ul { margin-top:10px;}
ul li {list-style:none; display:inline; padding:0px 10px;}
.center {
text-align:center;
color:#fff;
width:100%;
height:30px;
background:red;
clear:both;
}
.left {
text-align:left;
color:#fff;
width:100%;
height:50px;
background:blue;
clear:both;
}
.right {
text-align:right;
color:#fff;
width:100%;
height:100px;
background:black;
clear:both;
}
</style>
</head>

<body>
<div class="container">
<div class="center">
<ul>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
</ul>
</div>
<div class="left">
<ul>
<li>menu2</li>
<li>menu2</li>
<li>menu2</li>
</ul>
</div>
<div class="right">
<ul>
<li>menu3</li>
<li>menu3</li>
<li>menu3</li>
</ul>
</div>
</div>
</body>
</html>

white tower

شنبه 26 بهمن 1392, 21:30 عصر

سلام اندازه عرض را بذارید 100٪

نمونه :

<!DOCTYPE html>
<html>
<head>
<title>Asila Design Group</title>
<meta charset="utf-8" />
<style type="text/css">
*{margin:0px; padding:0px;}
.container {
width: 100%;
height:768px;
background-color: #184c55;
background: -webkit-radial-gradient(400px 400px,#3cbfd6,#000101);
background: -moz-radial-gradient(400px 400px,#2f9fb2,#000101);
background-repeat:repeat-y;
background-size: cover; }
ul { margin-top:10px;}
ul li {list-style:none; display:inline; padding:0px 10px;}
.center {
text-align:center;
color:#fff;
width:100%;
height:30px;
background:red;
clear:both;
}
.left {
text-align:left;
color:#fff;
width:100%;
height:50px;
background:blue;
clear:both;
}
.right {
text-align:right;
color:#fff;
width:100%;
height:100px;
background:black;
clear:both;
}
</style>
</head>

<body>
<div class="container">
<div class="center">
<ul>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
</ul>
</div>
<div class="left">
<ul>
<li>menu2</li>
<li>menu2</li>
<li>menu2</li>
</ul>
</div>
<div class="right">
<ul>
<li>menu3</li>
<li>menu3</li>
<li>menu3</li>
</ul>
</div>
</div>
</body>
</html>

100% هم همبن مصیبته.می خوام اندازه بک گراند ثابت باشه.یعنی همون 1250px.وقتی گرادینت نیست درسته یعنی تمام صفحه مثلا آبی میشه.مشکلم با اندازه گرادینته.

نیلوفر66

شنبه 26 بهمن 1392, 22:01 عصر

از این سایت برای گرادیانت زمینه استفاده کن
http://www.colorzilla.com/gradient-editor/

refugee

شنبه 26 بهمن 1392, 23:46 عصر

دوست خوبم اینو من تست کردم درست بود . برا من نشون میداد چه در حالت 1280 و چه در حالت 450 پیکسل .