CSS Image re align,different lcd/screen

how to align multiple images in html horizontally
arrange images in a grid html
how to align image in css
html two images side by side centered
css display
horizontal row of images html
how to align images side by side in html
image and text side by side html css

I am having trouble in displaying a background image in a static web page. Is is showing different height when I view on different LCD's, how can I make sure height is adjusted to approx 80% of the area, I even give percentage in Style for height but it didn't worked for me.

See this Image for Reference:

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink- 
 to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Bakheet Japan</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/full-width-pics.css" rel="stylesheet">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"> 
</script>


<style>
    .buttons a {
        font-size: 16px;
    }

        .buttons a:hover {
            cursor: pointer;
            font-size: 16px;
        }

    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background-color: dimgrey;
        color: white;
        text-align: center;
    }

    header.py-5 {
        width: 100%;
        display: block;
        width: auto;
        height: 450px !important;
    }
 </style>

 </head>
 <body>
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand " href="#"><h3>Bakheet Japan</h3></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
    data-target="#navbarResponsive" aria-controls="navbarResponsive" aria- 
    expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <!--<div class="buttons">-->
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link button" href="index.html">
                        Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link button" href="Aboutus.html">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link button" 
    href="Services.html">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link button" 
    href="Contactus.html">Contact</a>
                </li>
            </ul>
            <!--</div>-->
        </div>
    </div>
</nav>

    <header class="py-5 bg-image-full" style="background- 
   image:url('css/arid- 
   barren-daylight-813873.jpg');">
    <img class="img-fluid d-block mx-auto" height="230" width="240" 
    src="css/41435f27-bfd3-452a-b442-f8c4ca429a55.png" alt="">
   </header>


<div id="div1" class="container" style="height:150px;">
    <h1>Welcome to Bakheet Japan</h1>

</div>


<div class="footer container">
    <p class="m-0 text-center text-white">Copyright &copy; Bakheet Japan 
2018</p>
</div>


</body>
</html>

Just added height to your <header> of 80vh (Viewport Height)

Which mean 80% of your screen height.

.buttons a {
  font-size: 16px;
}

.buttons a:hover {
  cursor: pointer;
  font-size: 16px;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: dimgrey;
  color: white;
  text-align: center;
}

header.py-5 {
  display: block;
  height: 80vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand " href="#">
      <h3>Bakheet Japan</h3>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria- expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <!--<div class="buttons">-->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link button" href="index.html">
                        Home
                        <span class="sr-only">(current)</span>
                    </a>
        </li>
        <li class="nav-item">
          <a class="nav-link button" href="Aboutus.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link button" href="Services.html">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link button" href="Contactus.html">Contact</a>
        </li>
      </ul>
      <!--</div>-->
    </div>
  </div>
</nav>

<header class="py-5 bg-image-full" style="background-image:url('https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285');">
  <img class="img-fluid d-block mx-auto" height="230" width="240" src="https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285" alt="">
</header>


<div id="div1" class="container" style="height:150px;">
  <h1>Welcome to Bakheet Japan</h1>

</div>


<div class="footer container">
  <p class="m-0 text-center text-white">Copyright &copy; Bakheet Japan 2018
  </p>
</div>

How To Align Images Side By Side, Learn how to align images side by side with CSS. Three image containers (use 25% for four, and 50% for two, etc) */ .column { float: left; width: 33.33%; The goal is to get the buttons and other items looking and fitting nicely on screen for the various screen sizes (different devices) or browser resizes while showing at least one full image on screen with the buttons. The three major screen sizes I’m going for is: Desktop; Tablet ; Mobile phones

.buttons a {
  font-size: 16px;
}

.buttons a:hover {
  cursor: pointer;
  font-size: 16px;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: dimgrey;
  color: white;
  text-align: center;
}

header.py-5 {
  
display: block;
  height: 80vh;background-size: cover;
background-image:url('https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285');
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand " href="#">
      <h3>Bakheet Japan</h3>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria- expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <!--<div class="buttons">-->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link button" href="index.html">
                        Home
                        <span class="sr-only">(current)</span>
                    </a>
        </li>
        <li class="nav-item">
          <a class="nav-link button" href="Aboutus.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link button" href="Services.html">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link button" href="Contactus.html">Contact</a>
        </li>
      </ul>
      <!--</div>-->
    </div>
  </div>
</nav>

<header class="py-5 bg-image-full" style="">
  <img class="img-fluid d-block mx-auto" height="230" width="240" src="https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285" alt="">
</header>


<div id="div1" class="container" style="height:150px;">
  <h1>Welcome to Bakheet Japan</h1>

</div>


<div class="footer container">
  <p class="m-0 text-center text-white">Copyright &copy; Bakheet Japan 2018
  </p>
</div>

Responsive Image Gallery, div.gallery img { text-align: center; } ​ This example use media queries to re-​arrange the images on different screen sizes: for screens larger You will learn more about media queries and responsive web design later in our CSS Tutorial. The reason I like #4 is because it maintains the image when CSS is turned off. Like I’ve mentioned before, just because someone turns CSS off doesn’t mean they want their images off too, and many of these techniques do exactly that. The reason you would be replacing the image might be because it’s a different image.

height: 80vh;
background-image: url('image_path');
background-size: cover;

CSS Display Module Level 3, When filing an issue, please put the text “css-display” in the title, display types (​like tables) that generate multiple container boxes, and intervening anonymous boxes. so view older specs with caution when they're using these terms. For example, the content of the HTML img element is often replaced  CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

The CSS layout model: borders, boxes, margins and padding , how css layout works with margin outside the box and padding inside the box All inline elements except images lack margins, and will not take margin values. differences in layout between browsers which display content via LCD, LED, or CRT Like plain old width and height , they're subject to rounding errors that can​  Centering vertically. CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3 (see below ). But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell,

Ionic 4 vertical center, Ionic 4 With CSS grid layout, the grid itself within its container as well as grid items Studio and today we're sharing with you an early version of Ionic 2 templates, Angular Grid system with multiple ways to vertically align content. com or Apr 08, How to make an image center vertically and horizontally inside a div - In  On-screen display: Locate a main adjustment button, sometimes labeled Menu, on your monitor. Pressing that button pops up an on-screen display, such as the one shown in this figure. You then use additional buttons — plus, minus, up, down — to select items from the menu and use possibly even more buttons to adjust values.

Adjusting Your Computer Kit's Display to Fit Your Screen – Kano Help, If the picture sent from your Computer Kit to your screen doesn't quite fit, or there are In Display, you have the option to change your screen resolution to better fit the screen Move the slider and the image on your screen will start to shrink. I want to resize an image based on the screen resolution. For instance, if a user resizes their browser, or it is a mobile device, etc. And put a max-width on a panel (div) box around the image. But that ONLY resizes the image if my starting width is larger than the image itself.

Comments
  • use vh . 80vh
  • Where do you set it to 80% height? I only see height: 450px !important;!?
  • Yea I changed back to pixels
  • I will test and respond to you, thank you
  • Thank you so much.
  • 800vh; would be 8 times the height of the screen - I suppose you mean 80vh...
  • @ranjeet8082 You can edit your answer to fix this! :)
  • Thanks Ranjeet, its working now I can also adjust for no scroll.