Jak zrobić różne tło na różnych podstronach

[ZenezPL1]

Witam nazywam się Tomasz i mam problem z podstroną a mianowicie zapomniałem jak na inna podstronę dać inne tło o to mój .css
 

body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 12px;
    color: #e5eeff;
    background: url(../images/bg.jpg) top center no-repeat #fff;
     
}
 
img {border: none;}
a:link {text-decoration: none; color: inherit;}
a:visited {text-decoration: none; color: inherit;}
a:hover {text-decoration: none; color: inherit;}
a:active {text-decoration: none; color: inherit;}
 
.wrapper {
    width: 1127px;
    margin: 0 auto;
}
 
.header {
    height: 121px;
}
 
    .header .logo {
        margin: 5px 0 0 45px;
        display: inline-block;
        vertical-align: top;
    }
     
    .header ul {
        float: right;
        margin: 40px 30px 0 0;
    }
     
    .header ul li {
        display: inline-block;
        vertical-align: top;
        line-height: 24px;
        padding: 0 15px;
    }
     
    .header ul li + li {
        border-left: 1px solid #eeeeee;
    }
     
    .header ul li a {
        font-size: 18px;
        color: #3e63ad;
        font-family: Arial Narrow, Arial;
        line-height: 30px;
        border-bottom: 1px solid #d6ddeb;
        display: block;
    }
     
    .header ul li a:hover,
    .header ul li.current a {
        border-top: 1px solid #d6ddeb;
        border-bottom: none;
    }
     
    .header ul li.current a {font-weight: bold;}
     
.home {
    height: 508px;
    width: 100%;
    position: relative;
}
     
    .home .sliderMain {
        width: 449px;
        height: 459px;
        position: absolute;
        top: 44px;
        left: -19px;
        z-index: 5;
        padding: 31px 0 0 30px;
        overflow: hidden;
    }
     
        .home .sliderMain .mask {
            width: 480px;
            height: 484px;
            background: url(../images/bubble1.png) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5000;
        }
 
    .home .bubbles {
        width: 697px;
        height: 449px;
        background: url(../images/bubble2.jpg) no-repeat;
        position: absolute;
        top: 24px;
        right: -35px;
        z-index: 5;
    }
     
        .home .bubbles .left {
            width: 300px;
            display: inline-block;
            vertical-align: top;
            margin: 83px 0 0 30px;
        }
         
            .home .bubbles .left p {
                line-height: 20px;
                text-align: center;
            }
             
            .home .bubbles .left p a {
                font-weight: bold;
                text-decoration: underline;
            }
             
        .home .bubbles .right {
            width: 240px;
            display: inline-block;
            vertical-align: top;
            margin: 180px 0 0 85px;
        }
         
            .home .bubbles .right h2 {
                font-size: 45px;
                color: #f3f7ff;
                font-weight: bold;
            }
             
            .home .bubbles .right h3 {
                font-size: 20px;
                color: #f3f7ff;
                font-weight: bold;
            }
         
            .home .bubbles .right p {
                line-height: 20px;
                text-align: left;
            }
             
            .home .bubbles .right p a {
                text-decoration: underline;
            }
             
    .home .motto {
        font-size: 18px;
        position: absolute;
        top: 25px;
        right: -25px;
        z-index: 6;
        text-align: right;
        text-transform: uppercase;
    }
     
        .home .motto span {
            color: #fff600;
            font-size: 31px;
            font-weight: bold;
        }
         
    .home .rz {
        position: absolute;
        bottom: 0;
        right: -15px;
        z-index: 6;
    }
     
.contact {
    padding: 30px 0 0 65px;
}
 
    .contact .map {
        display: inline-block;
        vertical-align: top;
        border: 10px solid #6a88b8;
        height: 400px;
    }
     
    .contact .info {
        display: inline-block;
        vertical-align: top;
        padding: 10px 0 0 30px;
        width: 250px;
        color: #d5dff3;
    }
     
        .contact .info h2 {
            font-size: 45px;
            font-weight: bold;
        }
         
        .contact .info h3 {
            font-size: 20px;
            font-weight: bold;
        }
         
        .contact .info p {
            line-height: 20px;
            margin: 5px 0 0 0;
        }
         
        .contact .info p.blue {
            color: #8fabd8;
            line-height: normal;
            margin: 10px 0 0 0;
        }
         
.about {
    padding: 30px 0 0 25px;
}
 
    .about .photos {
        width: 220px;
        display: inline-block;
        vertical-align: top;
    }
     
        .about .photos img {
            border: 10px solid #6a88b8;
        }
         
        .about .photos a {
            display: inline-block;
            vertical-align: top;
        }
         
        .about .photos a + a {
            margin-top: 15px;
        }
         
        .about .photos2 {
        width: 240px;
        display: inline-block;
        vertical-align: top;
    }
     
        .about .photos2 img {
            border: 10px solid #6a88b8;
        }
         
        .about .photos2 a {
            display: inline-block;
            vertical-align: top;
        }
         
        .about .photos2 a + a {
            margin-top: 15px;
        }
         
    .about .text {
        width: 820px;
        display: inline-block;
        vertical-align: top;
        margin: 20px 0 0 30px;
    }
     
        .about .text p {
            line-height: 22px;
        }
         
.offer {
    padding: 30px 0 0 30px;
}
 
    .offer .box {
        width: 320px;
        display: inline-block;
        vertical-align: top;
        box-shadow: #fff 0px 0px 0px; 
    }
     
    .offer .box + .box {
        margin-left: 40px;
    }
     
    .offer .box .title {
        height: 26px;
        padding: 86px 0 0 15px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
    }
     
    .offer .box .t1 {background: url(../images/n1.jpg) no-repeat;}
    .offer .box .t2 {background: url(../images/n2.jpg) no-repeat;}
    .offer .box .t3 {background: url(../images/n3.jpg) no-repeat;}
     
    .offer .box .cont {
        background: #1f386c;
        margin: 6px 0 0 0;
        padding: 15px;
        min-height: 350px;
    }
     
        .offer .box .cont p {
            line-height: 28px;
            color: #fff;
        }
     
.footer {
    margin: 20px 0 0 0;
    border-top: 1px solid #5775b4;
    padding: 17px 15px 70px;
}
 
    .footer .tags {
        width: 875px;
        height: 25px;
        font-size: 11px;
        color: #6e81b2;
        line-height: 25px;
        overflow: hidden;
    }
     
    .footer .cr {
        float: right;
        font-size: 11px;
        color: #6485bd;
        line-height: 27px;
    }
     
    .footer .cr a {font-weight: bold;}
    .footer .cr a:hover {text-decoration: underline;}
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    .refs {
    margin: 10px 0 0 0; 
}
 
    .refs h2 {
        color: #f3d610;
        font-size: 30px;
        font-family: Arial Narrow;
        font-weight: normal;
        margin: 0 0 15px;
    }
     
    .refs .field {
        margin: 0 0 3px 0;  
    }
     
        .refs .field h3 {
            background: #264073;
            line-height: 30px;
            height: 30px;
            text-indent: 10px;
            color: #fff;
            font-family: Tahoma, Geneva, sans-serif;
            font-weight: bold;  
        }
         
        .refs .field .information {
            height: 55px;
            background: url(../images/dots.html) center right no-repeat #33559c;    
        }
         
        .refs .field p {
            display: inline-block;
            line-height: 55px;
            text-indent: 25px;
        }
         
        .refs .field .thumbs {
            float: right;
            margin: 7px 68px 0 0;   
        }
         
            .refs .field .thumbs img {border: 2px solid #425b8a;}
             
             
             
             
             
                .refs .field2 {
        margin: 0 0 3px 0;  
    }
     
        .refs .field2 h3 {
            background: #1a386e;
            line-height: 30px;
            height: 30px;
            text-indent: 10px;
            color: #fff;
            font-family: Tahoma, Geneva, sans-serif;
            font-weight: bold;  
        }
         
        .refs .field2 .information {
            height: 100px;
            background: url(../images/dots.html) center right no-repeat #173266;    
        }
         
        .refs .field2 p {
            display: inline-block;
            margin-top: 32px;
            line-height: 18px;
            text-indent: 25px;
        }
         
        .refs .field2 .thumbs {
            float: right;
            margin: 7px 68px 0 0;   
        }
         
            .refs .field2 .thumbs img {border: 2px solid #425b8a;}
             
             
             
                .refs .field3 {
        margin: 0 0 3px 0;  
    }
     
        .refs .field3 h3 {
            background: #1a386e;
            line-height: 30px;
            height: 30px;
            text-indent: 10px;
            color: #fff;
            font-family: Tahoma, Geneva, sans-serif;
            font-weight: bold;  
        }
         
        .refs .field3 .information {
            height: 130px;
            background: url(../images/dots.html) center right no-repeat #173266;    
        }
         
        .refs .field3 p {
            display: inline-block;
            margin-top: 32px;
            line-height: 18px;
            text-indent: 25px;
        }
         
        .refs .field3 .thumbs {
            float: right;
            margin: 7px 68px 0 0;   
        }
         
            .refs .field3 .thumbs img {border: 2px solid #425b8a;}
             
             

[Jakub]

Na podstronie dodaj jakieś id (lub klasę) do znacznika body, potem go sobie zdefiniuj w stylu. W razie czego gdyby ładowało styl dla znacznika body i ignorowało ten z id/klasy złam kaskadowość dopisując !important na końcu tej właściwości, którą ma brać pod uwagę. W razie problemów pisz.

[ZenezPL1]

Na podstronie dodaj jakieś id (lub klasę) do znacznika body, potem go sobie zdefiniuj w stylu. W razie czego gdyby ładowało styl dla znacznika body i ignorowało ten z id/klasy złam kaskadowość dopisując !important na końcu tej właściwości, którą ma brać pod uwagę. W razie problemów pisz.

tak ?

 

body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 12px;
    color: #e5eeff;
    background: url(../images/bg1.jpg) top center no-repeat #fff;
	
 .tlo1{
background: url(../images/bg.jpg');
}
.tlo2{
background: url('tlo2.jpg');
}
	
}

[Jakub]

body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 12px;
    color: #e5eeff;
    background: url(../images/bg1.jpg) top center no-repeat #fff;
}
.tlo1{
background: url(../images/bg.jpg');
}
.tlo2{
background: url('tlo2.jpg');
}

Tak jak zrobiłeś nie przeszłoby w .css, takie magie przy użyciu SCSS, ale to nie na początek. Potem dodajesz na podstronie klasę "tlo1" do elementu body i powinno grać.

[ZenezPL1]

body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 12px;
    color: #e5eeff;
    background: url(../images/bg1.jpg) top center no-repeat #fff;
}
.tlo1{
background: url(../images/bg.jpg');
}
.tlo2{
background: url('tlo2.jpg');
}

Tak jak zrobiłeś nie przeszłoby w .css, takie magie przy użyciu SCSS, ale to nie na początek. Potem dodajesz na podstronie klasę "tlo1" do elementu body i powinno grać.

 

czy Mógł byś mi napisać jakoś po polsku jak to zrobić

[Jakub]

Tak jak masz to w kodzie poprawionym przeze mnie + tak jak opisałem, dodajesz klasę do znacznika body na podstronie, na której chcesz.

[ZenezPL1]

Tak jak masz to w kodzie poprawionym przeze mnie + tak jak opisałem, dodajesz klasę do znacznika body na podstronie, na której chcesz.

 Mógł byś mi to przesłać ? poprawione w innych podstronach chce bg1 a na głównej bg

http://www.speedyshare.com/jhf6d/Nowy-folder.rar

[Jakub]

Nie będę wykonywał pracy za Ciebie. Czas samemu pogłówkować i coś zrobić, a nie przy pierwszym mniejszym (bo taki to jest) problemie posyłać komuś do zrobienia.

[ZenezPL1]

Nie będę wykonywał pracy za Ciebie. Czas samemu pogłówkować i coś zrobić, a nie przy pierwszym mniejszym (bo taki to jest) problemie posyłać komuś do zrobienia.

To powiesz jak dodać klase do body

[ZenezPL1]

Dobra dzięki wielkie już mi sie udało Temat do zamknięcia Pozdrawiam