0

Background cover and percentage width do the job scaling and aligning images for cases viewport is more horizontal than 16/9. For cases screen height is more than 0.5625 of width, outer layout parts start to eat center. In such case it might be better to crop from left and right, or may be add blank bars ontop and bottom.

Please provide your known best practices. Thank you very much for participation, peace, ayo.

<div class="bg">
</div>
<div class="column" id="column_left">
</div>
<div class="column" id="column_center">
</div>
<div class="column" id="column_right">
</div>

css:

bg {
   position: relative;
   overflow: hidden;
   height: 100%;
   width: 100%;
   max-width: 1920px;
   background: url(images/1920/bg.png) no-repeat center 0 /cover;
}

.column {
   max-width: 100%;
   opacity: 0;
   display: block;
   -webkit-transition: opacity 0.5s ease-in-out;
   -moz-transition: opacity 0.5s ease-in-out;
   transition: opacity 0.5s ease-in-out;
   position: absolute;
   height: 100%;

   &:hover {
      opacity: 1;
      cursor: pointer;
   }
}

#column_left {
   float: left;
   left: 0;
   width: 38.85%;
   background: url(images/1920/left.png) no-repeat 0 0 /cover;
}

#column_center {
   float: left;
   left: 0;
   right: 0;
   margin-left: 26.17%;
   width: 44.69%;
   background: url(images/1920/center.png) no-repeat center 0 /cover;
}

#column_right {
   float: right;
   right: 0;
   width: 39.58%;
   background: url(images/1920/right.png) no-repeat 100% 0 /cover;
}
user1859022
  • 2,585
  • 1
  • 21
  • 33
Ed Dubnitsky
  • 1
  • 1
  • I would recommend just using `object-fit: cover;` to ensure that shrinking the width of your viewport shrinks to the centre of the image, without shrinking or stretching it. – Obsidian Age Jun 13 '17 at 20:42
  • I am not sure if anyone else is having difficulty understanding your problem, but to improve your chances of getting an answer it would be good to provide a snippet/fiddle/codepen using placeholder images that accurately shows your problem. – WizardCoder Jun 13 '17 at 22:27

1 Answers1

0

Can you clearify what you are trying to achive? From what I can grasp it sounds like you maybe want to change from cover to contain on background-size?

background: url(images/1920/left.png) no-repeat 0 0 /cover;

to

background: url(images/1920/left.png) no-repeat 0 0;
background-size: contain;
daskel
  • 88
  • 1
  • 10