CODEWITHSUNDEEP
htmlcssimage-scaling
GeniusboyWonder
GeniusboyWonder

Reputation: 51

Background Parallax image wont resize

I am trying to create a multi-image parallax which works but the images do not show correctly on the mobile and I have tried everything.

Here is the URL for the site: http://hollybrook.absolutehtml.co.uk/

Here is the CSS Code

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg- 
8 {
  position: relative;

 background-attachment: fixed;
 background-repeat: no-repeat;
 background-size:cover;
}



.bgimg-1 {
  background-image: url("../images/house.jpg");
    width: 100%;
    height: 100%;
    min-height: 650px;
}

.bgimg-2 {
  background-image: url("../images/inside.jpg");
  min-height:100vh;
}

.bgimg-3 {
  background-image: url("../images/canoe.jpg");
  min-height:100vh;
}

.bgimg-4 {
  background-image: url("../images/bedroom1.jpg");
  min-height:100vh;
}

.bgimg-5 {
  background-image: url("../images/bathroom.jpg");
  min-height:100vh;
}

.bgimg-6 {
  background-image: url("../images/bedroom2.jpg");
  min-height:100vh;
}

.bgimg-7 {
  background-image: url("../images/bathroom2.jpg");
  min-height:100vh;
}

.bgimg-8 {
  background-image: url("../images/shower.jpg");
  min-height:100vh;
}

Here is the HTML

<div class="colourbannergrey">
          <div class="container">
           <h4 class="card-title">Your Stay</h4>
                   <p class="card-text">Hollybrook House is nestled on the shores of Dunmanus Bay and the Sheepshead Peninsula in the beautiful southwestern corner of Ireland in the region of West Cork.<br>
<br>
 The area is best known for the Wild Atlantic Way defining routes for driving and cycling from West Cork all the way to Donegal through the wildest Atlantic coastal scenery "where land and sea collide"....

                       <a href="http://www.wildatlanticway.com/" alt="Wild Atlantic Way">Wild Atlantic Way </a> <br>
<br>
                  </p>



              </div>
      </div>
      <div class="bgimg-2">




  </div>
      <div class="colourbannergrey">
          <div class="container">
         <h4 class="card-title offset-xl-0 col-xl-12">Your Accomodation</h4>
                    <p class="offset-xl-0 col-xl-12">
A typically Irish modern bungalow provides cosy accomodation for guests who are looking for a quiet serene retreat in one of the most beautiful and peaceful areas of the country. The house sits in an acre of mature gardens with uninterrupted views over Dunmanus Bay and Mount Gabriel.<br>
<br>

Your hosts Roma and Freddy are looking forward to welcoming you. 

Email:[email protected]  or call us +353(0)861601797</p>
      </div>
          </div>

I have tried using vh and VW, %, no matter what I try I cannot get the images to show and resize properly. Can anyone shed some light as to why I cannot get the images to show on the mobile.

Upvotes: 0

Views: 506

Answers (2)

SenTisso
SenTisso

Reputation: 641

Put this line in style of all img's

background-size: cover;

Upvotes: 0

Cryptex Technologies
Cryptex Technologies

Reputation: 1163

You can try this:

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg- 
8 {
    background-size:100% 100%;
}

Remove all css in above classes and add only background-size:100% 100%; css it will work for both desktop as well as mobile view

Upvotes: 1

Related Questions