من میخوام با css یک گرادینت به زمینم اضافه کنم ولی نمیشه.

Amir001

Member
من میخوام با css یک گرادینت به زمینم اضافه کنم ولی نمیشه.
ممنون میشم راهنماییم کنید
اینم کدم :
body {
background-image: url('../../../wamp/www/t/templates/speed/images/gradi.jpg');
background-repeat: repeat-y;
background-attachment: scroll;
background-position: center top;
width: 100%;
}

تصویریم که میخوام نتیجه کارم بشه رو براتون پیوست میکنم.
الآن همه چیز درسته . ولی این گرادینتم وسط قرار میگیره
 

پیوست ها

  • Untitled-1.png
    Untitled-1.png
    271.2 کیلوبایت · بازدیدها: 3

member99

Member
سلام / به راحتی می تونید این کار را انجام بدید / مثال زیر را نگاه کنید، یه چیز تو مایه های کار شماست / 2 تا تصویر هست که ضمیمه همین پست کردم به یکیشون میگیم برو چپ، اون یکی بره راست! ... شما مسلما این عکس ها را روی سرور خودتون آپلود می کنید.. من توی مثال زیر روی سرور های آپلود مجانی آپلودشون کردم:


[LTR]
HTML:
<style type="text/css">
body{
    background:url(http://upload.iranvij.ir/images_bahman/85815650478655980049.png) , url(http://upload.iranvij.ir/images_bahman/11804039425265667656.png) ;
background-repeat:repeat-y;
background-position:left, right;
}
</style>
[/LTR]
 

پیوست ها

  • left.png
    left.png
    2.8 کیلوبایت · بازدیدها: 1
  • right.png
    right.png
    2.8 کیلوبایت · بازدیدها: 1

Amir001

Member
خیلی عالی .مرسی دوست گلم.
من از کد backgroun-size:100% استفاده کردم. ولی این کاری که شما گفتی خیلی بهتره.
مرسی دوست خوبم.
یه سوال دیگه هم گذاشتم اگر اونم جواب بدی ممنونت میشم بزرگوار.
البته تو یه بحث دیگست.
حالا به اینجا انتقالش میدم
 

Amir001

Member
من میخوام همانطور که تو عکسم پیوست کردم.
در قسمت آبی متن قرار بدم.طوری که هر چقدر متنم زیاد شد کادر سبز رنگ به طور اتومات بیاد پایین.
ممنون میشم راهنماییم کنید:rose:
 

پیوست ها

  • help.jpg
    help.jpg
    141.5 کیلوبایت · بازدیدها: 13

member99

Member
بیشتر توضیح بده ... موجه نشدم! مگر قرار متن از کادر آبی که مشخص کردی بیرون بزنه بیاد پایین؟؟؟ کادر آبی ات مگه ثابت نیست؟ با چی نوشتی؟
 

Amir001

Member
نه.نه
این قالب جولاست.
شاید کاربر بخواد متنش رو بیشتر کنه.
من میخوام وقتی متنن زیاد شد.کادری که با سبز مشخص کردم بیاد پایین.که متنم از زیرش رد نشه.
 

member99

Member
فکر کنم منظورت حالت وبلاگی هست که هر چی پست زیادتر بشه ... فوتر هم باهاش بیاد پایین ... شرمنده .. من الان مسافر هستم... وقت نمیشه واست توضیح بدم ..
 

rezadaraee

Active Member
دوست من Div های قسمت بالا رو ( مثلا 3 ستون ) رو درون یک Div قرار بده.فکر میکنم مشکلت حل بشه.
 

Amir001

Member
دست عزیزم rezadaraee این کار انجام شده.
فکر کنم مربوط به overflow باشه.
ولی نمدونم کدوم div باید تغییر کنه
 

Amir001

Member
خدمت شما اینا کد css قالبم:
PHP:
		 			 body {
    background-image:url('../images/gradi.jpg');
    background-attachment: scroll;
    background-position:center;
    background-repeat:repeat-y;
    background-size:100%;
}
a:link {
    
    color: gray;
    text-decoration:none;
}
a:hover {
    color:black;
}
a:visited {
    color:gray;
}
#TopColor {
    background-image: url('../images/TopBody.png');
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: left top;
    position: absolute;
    top: 0px;
    width:100%;
    height: 30px;
    left:0px;
}
#web {
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 73px;
}
#heder {
    background-image: url('../images/Heder2.png');
    background-repeat: no-repeat;
    width: 800px;
    height: 110px;
    margin-right: auto;
    margin-left: auto;
    margin-top:6px;
}
#menu {
    background-color:black;
    width: 800px;
    height: 24px;
    margin-right: auto;
    margin-left: auto;
    margin-top:110px;
}
#menu :link {
    color:gray;
    text-decoration: none;
}
#menu :hover {
    color:white;
}
#slide {
    background-image: url('../images/PicSlide.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    width: 800px;
    height: 340px;
    margin-right: auto;
    margin-left: auto;
    margin-top:-14px;
}
#user1 {
    background-image: url('../imagesj/PicMadule.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    width: 241px;
    height: 187px;
    float: left;

}
#user {
    width: 800px;
    height: auto;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    margin-top:25px;
}
#user2 {
    background-image: url('../imagesj/user3.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    width: 241px;
    height: 187px;
    float: left;
    margin-left:37px;
}
#user3 {
    background-image: url('../imagesj/PicMadule.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    width: 241px;
    height: 187px;
    float: left;
    margin-left: 37px;
}
#gradient {
    background-image: url('../images/Gradient.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    width: 800px;
    height: 500px;
    margin-right: auto;
    margin-left: auto;
    margin-top:10px;
}
#right {
    width: 200px;
    height: auto;
    float: right;
    overflow: hidden;
    margin-top: 30px;
}
#right1 {
    width: 220px;
    height: 240px;
    float: right;
}
#titr {
    width: 100px;
    height: 25px;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    text-align: left;
}
#icon1 {
    width: 21px;
    height: 31px;
    float: right;
    background-image: url('../images/icon.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: left center;
}
#ic1 {
    background-image: url('images/ic.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: right top;
    clip: rect(auto, auto, auto, auto);
    width: 4px;
    height: 4px;
}
#tit {
    height: 250px;
    width: 200px;
    float: right;
}
#titr1 {
    text-align: right;
    margin-right:30px;
}
#titr2 {
    text-align: right;
    margin-right:30px;
}
#titr3 {
    text-align: right;
    margin-right:30px;
}
#titr4 {
    text-align: right;
    margin-right:30px;
}
#titr5 {
    text-align: right;
    margin-right:30px;
}
#titr6 {
    text-align: right;
    margin-right:30px;
}
#titr7 {
    text-align: right;
    margin-right:30px;
}
#ic1 {
    background-image: url('../images/ic.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: right center;
    width: 8px;
    height: 8px;
    float: right;
    margin-top:9px
}
#ic2 {
    background-image: url('../images/ic.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: right center;
    width: 8px;
    height: 8px;
    float: right;
    margin-top:9px
}
#ic3 {
    background-image: url('../images/ic.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: right center;
    width: 8px;
    height: 8px;
    float: right;
    margin-top:9px
}
#ic4 {
    background-image: url('../images/ic.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: right center;
    width: 8px;
    height: 8px;
    float: right;
    margin-top:9px
}
#ic5 {
    background-image: url('../images/ic.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: right center;
    width: 8px;
    height: 8px;
    float: right;
    margin-top:9px
}
#ic6 {
    background-image: url('../images/ic.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: right center;
    width: 8px;
    height: 8px;
    float: right;
    margin-top:9px
}
#ic7 {
    background-image: url('../images/ic.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: right center;
    width: 8px;
    height: 8px;
    float: right;
    margin-top:9px
}
#comment {
    width: 360px;
    height: 20px;
    float: right;
    margin-right: auto;
    margin-top: 45px;
    direction: rtl;
    margin-left: auto;
}
#left {
    width: 150px;
    height: 350px;
    float: right;
    margin-top: 35px;
    margin-left: 20px;
}
#right2 {
    width: 152px;
    height: 200ox;
    float: right;
    overflow: hidden;
}
#tright2 {
    width: 240px;
    height: 53px;
    float: right;
    text-align: right;
    margin-top:108px;
}
#left1 {
    width: 272px;
    height: 209px;
    float: right;
    text-align: right;
    margin-top: 20px;
}
#icd9 {
    width: 21px;
    height: 20px;
    background-image: url('../images/icon.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: right center;
    float: right;
    margin-top:3px;
}

#tleft {
    text-align: right;
    width:197px;
    margin-top:-30px;
}
#left2 {
    width:272px;
    height: 209px;
    float: right;
    text-align: right;
    margin-top: 20px;
    margin-right:75px;
}

#ColorRed {
    background-color: #FF0000;
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: left center;
    width:100%;
    height: 4px;
    position:absolute;
    left:0px;
    margin-top:308px;
}
#ColorBlack {
    background-color: #000000;
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: left center;
    width:100%;
    height: 300px;
    left:0px;
    margin-top:312px;
    position:absolute;
}
#bottom1 {
    height: auto;
    float: right;
    direction:rtl;
    margin-right:30px;
}
#tb {
    color: #FF0000;
    font-family: tahoma;
    height: 20px;
    float: right;
}
#bottom2 {
    height: auto;
    float: right;
    margin-right:500px;
    direction:rtl;
}
#bottom2:link {
    color:white;
    text-decoration:none;
}

#tb2 {
    color: #FF0000;
    font-family: tahoma;
    height: 20px;
    float: right;
}
#bottom3 {
    height: auto;
    float: left;
    direction:rtl;
    margin-left:30px;
}
#tb3 {
    color: #FF0000;
    font-family: tahoma;
    height: 20px;
    float: left;
}
#complet {
    width:100%;
    margin-left:auto;
    margin-right:auto;
}
#complet :link {
    color:white;
}
#google {
    float:right;
    position:fixed;
    color:red;
}
#search {
width:215px;
float:left;
text-align:right;
margin-left:-2px;
margin-top:-1px;
direction:rtl;
}
 

Amir001

Member
اینا هم کد php&html&... :
PHP:
<?php  
 // no direct access 
 defined( '_JEXEC' ) or die( 'Restricted access' );
 
 ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" /> 
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template.css" />
<style type="text/css">
.style2 {
    text-align: right;
}
.style5 {
    color: #999999;
    font-size: small;
    font-family: Tahoma;
}
.style6 {
    font-family: Tahoma;
}
.style7 {
    color: #999999;
    font-size: small;
}
.style10 {
    color: #999999;
    font-size: 13pt;
    font-family: Tahoma;
}
.style11 {
    color: #999999;
    font-size: 13pt;
}
</style>
</head>

<body>
<div id="google"><jdoc:include type="modules" name="google" style="xhtml" /></div>
    <div id="TopColor">
        <div id="heder"></div>
    </div>
    <div id="web">
        <div id="menu" class="style2">
            <span class="style6"><span lang="fa" class="style11">
            <a href="index.php?option=com_content&view=frontpage">صفحه اصلی</a> 
            </span> 
            </span> 
            <span lang="en-us" class="style10">|</span><span lang="fa" class="style5"> 
            </span><span lang="fa" class="style10"> 
            <a href="#">درباره ما </a> 
            </span><span lang="en-us" class="style10">|</span><span lang="fa" class="style10"><a href="index.php?option=com_contact&view=contact&id=1">تماس با ما</a></span>
                <div id="search"><jdoc:include type="modules" name="search" style="xhtml" />
</div>
            </div>
        <div id="slide"><jdoc:include type="modules" name="slide" style="xhtml" />
</div>
        <div id="user">
            <div id="user1"><jdoc:include type="modules" name="user1" style="xhtml" />
</div>
            <div id="user2"><jdoc:include type="modules" name="user2" style="xhtml" />
</div>
            <div id="user3"><jdoc:include type="modules" name="user3" style="xhtml" />
</div>
        </div>
        <div id="gradient">
            <div id="right">
                <div id="right1">
                <map name="FPMap0" id="FPMap0">
                <area href="d" shape="rect" coords="97, 33, 169, 51">
                <area href="e" shape="rect" coords="116, 55, 165, 76">
                <area href="f" shape="rect" coords="127, 85, 167, 102">
                <area href="g" shape="rect" coords="116, 109, 168, 129">
                <area href="http://ent.ir/" shape="rect" coords="48, 138, 168, 156">
                <area href="i" shape="rect" coords="74, 161, 168, 182">
                <area href="j" shape="rect" coords="67, 187, 168, 211">
                </map>
                <img alt="" src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/images/menuOrginal.png" width="200" height="240" usemap="#FPMap0"></div>
                <div id="tright2">
                    <img alt="" src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/images/gra.png" width="175" height="100"></div>
            <div id="right2"><jdoc:include type="modules" name="right2" style="xhtml" />
            </div>
            </div>
            <div id="comment"><jdoc:include type="component" /></div>
                
            <div id="left">
                <div id="left1">
                    <div id="tleft"><img alt="" src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/images/tleft.png" width="65" height="17"><jdoc:include type="modules" name="left1" style="xhtml" /></div></div>
                <div id="left2"><jdoc:include type="modules" name="left2" style="xhtml" />
</div>
            </div>

        </div>
        
    <div id="ColorRed"></div>
    <div id="ColorBlack">
    
    <div id="complet">
    <div id="tb"><span lang="fa"></span><div id="bottom1"><jdoc:include type="modules" name="bottom1" style="xhtml" /></div>
        

            
        </div>    
        

            <div id="tb2"><span lang="fa"></span><div id="bottom2"><jdoc:include type="modules" name="bottom2" style="xhtml" /></div>
        </div>    
        <div id="tb3"><span lang="fa"></span><div id="bottom3"><jdoc:include type="modules" name="bottom3" style="xhtml" /></div>

            
        </div>    
                </div></div>
        
    </div>    

</body>

</html>
 

echessdesign

مدیر انجمن طراحی وب
توجه بفرمایید که قرار دادن بیش از یک مقدار در خصیصه background منحصر با CSS3 هست!
 

talesh

Active Member
فکر کنم این کد به شما کمک کنه
background: -moz-linear-gradient(top, #E4E4E4 0%, #F6F6F6 30%);
 

جدیدترین ارسال ها

بالا