<!DOCTYPE html> <!--[if lt IE 7]> <html class="ie lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="ie lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="ie lt-ie9"> <![endif]--> <!--[if gt IE 8]> <html class=""> <![endif]--> <!--[if !IE]><!--><html class=""><!-- <![endif]--> <head> <title>www.krisdika.go.th</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-874"> <!--<meta charset="UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">--> <meta http-equiv="refresh" content="20; URL=http://www.krisdika.go.th/wps/portal/general"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <link href="css.css" rel="stylesheet" type="text/css"/> <style> html{ /* This image will be displayed fullscreen*/ background:url('bg.png') no-repeat center center; background:url('bg.png'); /* background-color:#f5efc9; background-size: cover; background-repeat: no-repeat; background-position: center center; */ /* Ensure the html element always takes up the full height of the browser window */ min-height:100%; /* The Magic */ background-size:cover; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; } body{ min-height:100%; /*background: #fbc53e;*/ } .container{ /* width: 100%; background-image: url('img/bg.jpg'); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; background-attachment: fixed;*/ text-align: center; vertical-align: middle; min-height: 100%; height: 100%; padding-top: 2%; } .bg{ width: 60%; height: auto; } .pic_1,.pic_2{ display: inline-block; /*position: absolute;*/ width: 90%; height: auto; vertical-align: middle; } .pic_1 img,.pic_2 img{ width: 90%; height: auto; } .pic_2 img{ width: 70%; height: 80%; } .pic_3 img{ width: 20%; height: 20%; } @media screen and (max-width: 1120px) and (min-height: 800px) { body { background-size: auto; -moz-background-size: auto; -o-background-size: auto; -webkit-background-size: auto; } .pic_1,.pic_2{ display: inline-block; /*position: absolute;*/ width: 75%; height: auto; text-align: center; vertical-align: middle; } .pic_1 img,.pic_2 img{ width: 75%; height: auto; margin: 0 auto; padding: 0; } .pic_2 img{ width: 70%; height: 80%; } .pic_3 img{ width: 20%; height: 20%; } } @media screen and (max-width: 1024px) and (min-height: 768px) { body { background-size: auto; -moz-background-size: auto; -o-background-size: auto; -webkit-background-size: auto; } .pic_1,.pic_2{ display: inline-block; /*position: absolute;*/ width: 75%; height: auto; text-align: center; vertical-align: middle; } .pic_1 img,.pic_2 img{ width: 75%; height: auto; margin: 0 auto; padding: 0; } .pic_2 img{ width: 80%; height: 80%; } .pic_3 img{ width: 20%; height: 20%; } } @media screen and (max-width: 799px) and (min-height: 320px) { body { background-size: auto; -moz-background-size: auto; -o-background-size: auto; -webkit-background-size: auto; } .pic_1,.pic_2{ display: inline-block; /*position: absolute;*/ width: 75%; height: auto; vertical-align: middle; } .pic_1 img,.pic_2 img{ width: 75%; height: auto; } .pic_2 img{ width: 70%; height: 80%; } .pic_3 img{ width: 20%; height: 20%; } } </style> </head> <body> <div class="container"> <!--<img src="img/bg.jpg" class="bg" alt=""/>--> <div class="pic_1"> <a href="http://www.krisdika.go.th/wps/portal/general"><img src="image/Queen.png" alt="www.krisdika.go.th"/></a> </div> </div> </body> </html>