Reputation: 83

How can I scale down the image through css?

I would like to show every part of the sculpture. I'm trying to add a Parallax effect on the page.

body,
html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 1.8em;
  color: #666;
}

.fox {
  background-image: url('https://images.squarespace-cdn.com/content/v1/533b3eaae4b0ac273368560e/1593808903170-L72NFRC5HVJ7ZV4YPSKN/ke17ZwdGBToddI8pDm48kHUZU1VQuKQ0i9seXnqxeZ17gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luj0xCD0oh5KMc0gpox0u97MBNGrB-WlK2RJDlX919z6LRrKc4j6gnP5EoAvI0pyA/scu_010_Untitled%28Fox%29.jpg?format=1000w');
  min-height: 100%;
  background-size: cover;
  position: relative;
  background-position: center;
  background-repeat: repeat;
  background-attachment: fixed;
}

<body>
  <div class="fox">
    <div class="text-fox">
    </div>
  </div>

  <section class="section section-light">
    <h2>Section one</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
      laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
      sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
      mollitia.
    </p>
  </section>

  <section class="section section-light">
    <h2>Section one</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
      laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
      sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
      mollitia.
    </p>
  </section>

  <section class="section section-light">
    <h2>Section one</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
      laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
      sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
      mollitia.
    </p>
  </section>

Upvotes: 2

Answers (2)

Kampouse

Reputation: 17

https://redstapler.co/css-parallax-scrolling-effect/ found this that does pretty much what your asking to do? you can simply change height like that

.parallax-wrapper {
width: 100vw;
height:100vh;

Upvotes: 0

Temani Afif

Reputation: 272723

Use background-size:auto 100%

body,
html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 1.8em;
  color: #666;
}

.fox {
  background-image: url('https://images.squarespace-cdn.com/content/v1/533b3eaae4b0ac273368560e/1593808903170-L72NFRC5HVJ7ZV4YPSKN/ke17ZwdGBToddI8pDm48kHUZU1VQuKQ0i9seXnqxeZ17gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luj0xCD0oh5KMc0gpox0u97MBNGrB-WlK2RJDlX919z6LRrKc4j6gnP5EoAvI0pyA/scu_010_Untitled%28Fox%29.jpg?format=1000w');
  min-height: 100%;
  background-size: auto 100%;
  position: relative;
  background-position: center;
  background-repeat: repeat;
  background-attachment: fixed;
}

<body>
  <div class="fox">
    <div class="text-fox">
    </div>
  </div>

  <section class="section section-light">
    <h2>Section one</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
      laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
      sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
      mollitia.
    </p>
  </section>

  <section class="section section-light">
    <h2>Section one</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
      laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
      sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
      mollitia.
    </p>
  </section>

  <section class="section section-light">
    <h2>Section one</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
      laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
      sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
      mollitia.
    </p>
  </section>

or contain

body,
html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 1.8em;
  color: #666;
}

.fox {
  background-image: url('https://images.squarespace-cdn.com/content/v1/533b3eaae4b0ac273368560e/1593808903170-L72NFRC5HVJ7ZV4YPSKN/ke17ZwdGBToddI8pDm48kHUZU1VQuKQ0i9seXnqxeZ17gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luj0xCD0oh5KMc0gpox0u97MBNGrB-WlK2RJDlX919z6LRrKc4j6gnP5EoAvI0pyA/scu_010_Untitled%28Fox%29.jpg?format=1000w');
  min-height: 100%;
  background-size: contain;
  position: relative;
  background-position: center;
  background-repeat: repeat;
  background-attachment: fixed;
}

<body>
  <div class="fox">
    <div class="text-fox">
    </div>
  </div>

  <section class="section section-light">
    <h2>Section one</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
      laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
      sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
      mollitia.
    </p>
  </section>

  <section class="section section-light">
    <h2>Section one</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
      laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
      sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
      mollitia.
    </p>
  </section>

  <section class="section section-light">
    <h2>Section one</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
      laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
      sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
      mollitia.
    </p>
  </section>

Upvotes: 1

How can I scale down the image through css?

Answers (2)

Related Questions