HTML/CSS dodawanie zdjec na podstronach

pytanie zadane 26 lipca 2017 w HTML i CSS przez flewMaster Nowicjusz (190 p.)

Witam serdecznie.

Posiadam zakladke menu (home about services contact) na stronie glownej posiadam 3 zdjecia i przechodzac w zakladke 'about' chcialbym inne zdjecia. Moje pytanie czy musze stworzyc plik w css o nazwie about poniewaz zmieniajac w css obrazek automatycznie sie pokazuje i w menu i w innych zakladach a chcialbym na kazdej zakladce inne zdjecia. prosze o pomoc.

Pozdrawiam

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=egde">
    <title>Page1</title>

    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Gruppo&amp;subset=latin-ext" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Syncopate" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" typ="text/css">
  </head>
  <body>

    <div class="nav-section"></div>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
          <li><a href="About.html">About</a></li>
            <li><a href="Services.html">Services</a></li>
              <li><a href="Contact.html">Contact</a></li>
      </ul>
    </nav>








    <div class="pimg1">
      <div class="ptext">
        <span class="border">
          Breath
            </span>
          </div>
        </div>

        <section class="section section-light">
          <h2>Section One</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi culpa unde eum iusto porro error aliquam odio tempora alias libero, consequuntur animi optio illum quis ullam mollitia cupiditate similique, rerum vel quae doloremque in. Recusandae dolor, praesentium rerum quasi deserunt. Quidem repellendus nulla praesentium voluptatibus ad quibusdam laudantium impedit enim.
          </p>
        </section>

        <div class="pimg2">
          <div class="ptext">
            <span class="border trans">
              Image Two text
                </span>
              </div>
            </div>

            <section class="section section-dark">
              <h2>Section Two</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi culpa unde eum iusto porro error aliquam odio tempora alias libero, consequuntur animi optio illum quis ullam mollitia cupiditate similique, rerum vel quae doloremque in. Recusandae dolor, praesentium rerum quasi deserunt. Quidem repellendus nulla praesentium voluptatibus ad quibusdam laudantium impedit enim.
              </p>
            </section>

            <div class="pimg3">
              <div class="ptext">
                <span class="border trans">
                  Image Three text
                    </span>
                  </div>
                </div>

                <section class="section section-dark">
                  <h2>Section Three</h2>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi culpa unde eum iusto porro error aliquam odio tempora alias libero, consequuntur animi optio illum quis ullam mollitia cupiditate similique, rerum vel quae doloremque in. Recusandae dolor, praesentium rerum quasi deserunt. Quidem repellendus nulla praesentium voluptatibus ad quibusdam laudantium impedit enim.
                  </p>
            </div>
            <div class="container">
              <div class="icon facebook"><i class="fa fa-facebook" aria-hidden="true"></i></div>
              <div class="icon twitter"><i class="fa fa-twitter" aria-hidden="true"></i></div>
              <div class="icon instagram"><i class="fa fa-instagram" aria-hidden="true"></i></div>
              <div class="icon linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></div>
            </div>



                </section>





                <div class="pimg1">
                  <div class="ptext">
                    <span class="border">
                      Moja Strona
                        </span>
                      </div>
                    </div>






<footer>Strona 2017.</footer>

  </body>
</html>

body, html{
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 400;
  line-height: 1.8em;
  color: #666;
}
.pimg1, .pimg2, .pimg3{
  position: relative;
  opacity: 0.70;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

}


.pimg1{
  background-image: url("../img/super1.jpeg");
  min-height: 100%
}

.pimg2{
  background-image: url("../img/super2.jpeg");
  min-height: 90%;
}
.pimg3{
  background-image: url("../img/super3.jpeg");
  min-height: 100%;
}

.section{
  text-align: center;
  padding: 50px; 80px;
}
.section-light{
  background-color: #f4f4f4;
  color: #666;
}
.section-dark{
  background-color: #282e34;
  color: #ddd;
}
.ptext{
  position: absolute;
  top:50%;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 27px;
  letter-spacing: 8px;
  text-transform: uppercase;
}
.ptext .border{
  background-color: #111;
  color: white;
  padding: 20px;
}
.ptext .border .trans{
  background-color: transparent;
}
footer{
  text-align: center;
  font-size: 20px;
  padding: 5px;
  font-weight: 400;
  background-color: #fff;
  opacity: 0.8;
  font-family: 'Gruppo', cursive;
}

.nav-section{
  width: 100%;
  background-color: blue;
  background: cover;
}
nav ul{

  margin: 0;
  background-color: rgba(197,176,155,0.5);
  text-align: center;


}
nav ul li{
  list-style: none;
  display: inline-block;

}
ul li a{
  display: block;
  text-decoration: none;
  padding: 20px;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 300;
  color: black;
  transition: background-color 0.5s ease;
}
nav ul li a:hover{
  background-color: darkgray;
}
.container{
  width: 600px;
  margin-left: 380px;
}
.container .icon{
  position: relative;
  display: inline-block;
  float: left;
  font-size: 50px;
  text-align: center;
  width: 100px;
  height: 100px;

}
.facebook{
  color: #3b5998;
}
.facebook:hover{
  background-color: white;
}
.twitter{
  color: #00aced;
}
.twitter:hover{
  background-color: white;
}

.instagram{
  color: #bc2a8d;
}
.instagram:hover{
  background-color: white;
}
.linkedin{
  color: #007bb6;
}
.linkedin:hover{
  background-color: white;
}

komentarz 27 lipca 2017 przez Dzordzu Użytkownik (900 p.)

Nie możesz po prostu nieco edytować kodu w about.html?
Jeśli masz to jednak na jednej stronie użyj JavaScriptu :)

komentarz 28 lipca 2017 przez flewMaster Nowicjusz (190 p.)

Właśnie nie mam tego na jednej stronie.... i jak zmienić ten kod w about.html (czy w css) ponieważ kombinuje długi czas i nie idzie nic. Pousuwałem to czego nie potrzebuje ale zdjecia caly czas sa te same co w indexie. Pozdrawiam

1 odpowiedź

odpowiedź 30 lipca 2017 przez Dzordzu Użytkownik (900 p.)

Ok to do rzeczy ;)
Jeśli chcesz zmienić obrazek to najlepiej zmienić nieco kod w about.html
Masz 3 klasy pigm. Dla about.html dorób po prostu kolejne 3 i je odpowiednio wystyluj:

<div class="pimg4">
      <div class="ptext">
        <span class="border">
          Breath
            </span>
          </div>
        </div>
 
 
        <div class="pimg5">
          <div class="ptext">
            <span class="border trans">
              Image Two text
                </span>
              </div>
            </div>
 
 
            <div class="pimg6">
              <div class="ptext">
                <span class="border trans">
                  Image Three text
                    </span>
                  </div>
                </div>

.pimg1, .pigm3, .pigm4, .pigm6{
  min-height: 100%;
}

.pigm2, .pigm5{
min-height: 90%;
}

.pigm1{
background-image: url(/*Adres do obrazka*/);
}
.pimg2{
  background-image: url(/*Adres do obrazka*/);
}
.pimg3{
  background-image: url(/*Adres do obrazka*/);
}
.pigm4{
background-image: url(/*Adres do obrazka*/);
}
.pimg5{
  background-image: url(/*Adres do obrazka*/);
}
.pimg6{
  background-image: url(/*Adres do obrazka*/);
}

To jest najprostsza metoda. Możesz także skorzystać z angular.js, czy samemu napisać skrypt w np. jQuery który z jakiegoś atrybutu pobierze wartość i podmieni w background-color. Jeśli będziesz chętny to potem mogę wstawić któryś z tych kodów ;)