最近よく見かける、背景写真を画面いっぱいにして表示する方法を紹介したいと思います。cssだけで実現できるのでとっても簡単だし、迫力のある今っぽいデザインができるのでオススメ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ja"> <head> <title>cssで実現する背景画像をブラウザいっぱいに表示する方法</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" href="style.css"> <script type='text/javascript' src='../../../js/jquery.min.js'></script> </head> <body> <header class="container"> <section class="content"> <h1>cssで実現する背景画像をブラウザいっぱいに表示する方法</h1> <p class="sub-title">ブラウザの幅によって自動で背景画像の大きさが変わります!!</p> </section> </header> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 |
/* Responsive Full Background Image Using CSS * Tutorial URL: http://sixrevisions.com/css/responsive-background-image/ */ body { /* Location of the image */ background-image: url(images/background-images.jpg); /* Image is centered vertically and horizontally at all times */ background-position: center center; /* Image doesn't repeat */ background-repeat: no-repeat; /* Makes the image fixed in the viewport so that it doesn't move when the content height is greater than the image height */ background-attachment: fixed; /* This is what makes the background image rescale based on its container's size */ background-size: cover; /* Pick a solid background color that will be displayed while the background image is loading */ background-color:#fff; /* SHORTHAND CSS NOTATION * background: url(background-photo.jpg) center center cover no-repeat fixed; */ } /* Presentational style rules only * Not required */ html, body, .container { height: 100%; } /* Reset */ html, body, h1, p, a, div, section { margin: 0; padding: 0; font-size: 100%; font: inherit; } /* Basic */ body { font: 18px/23px "Cantarell", sans-serif; color: #333; text-shadow: 0 0px 10px #fff; } h1 { color: #333; text-transform: uppercase; font-size: 40px; line-height: 50px; font-weight: 400; margin-top: 20px; } a { color: #999; } p { margin: 0 0 15px 0; } strong { font-weight: 700; } /* Layout */ .navbar { width: 100%; background-color: rgba(0, 0, 0, 0.6); height: 40px; z-index: 9999; position: fixed; } .inner { position: relative; margin: 0 auto; text-align: center; } .navbar a { display: inline-block; border: 1px solid #fff; font-size: 14px; line-height: 24px; border-radius: 3px; padding: 2px 15px; text-decoration: none; margin-top: 5px; } .container { display: table; padding-top: 80px; width: 100%; } .content { display: table-cell; vertical-align: middle; text-align: center; } /* Special */ .sub-title { margin: 50px auto; font-size: 18px; line-height: 23px; text-transform: uppercase; } #more-content { display: none; } /* Media Queries */ @media only screen and (max-width: 340px) { .container { position: relative; display: block; float: left; vertical-align: baseline; margin: 0 auto; padding: 80px 0 0 0; } #more-content { float: left; margin-right: 10px; } body h1 { font-size: 18px; line-height: 23px; } .content, blockquote { display: inline; margin: 0 auto; padding-top: 80px; vertical-align: baseline; } .sub-title { font-size: 14px; line-height: 21px; } .button, p { max-width: 150px; margin: 0 auto; font-size: 15px; line-height: 20px; } html, body, .container { height: auto; } } /* For mobile devices */ @media only screen and (max-width: 767px) { body { /* The file size of this background image is 93% smaller * to improve page load speed on mobile internet connections */ background-image: url(images/background-images-mobile-devices.jpg); } } |
これで実現できます。 テキストとかの装飾は以下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
html, body, .container { height: 100%; } /* Reset */ html, body, h1, p, a, div, section { margin: 0; padding: 0; font-size: 100%; font: inherit; } /* Basic */ body { font: 18px/23px "Cantarell", sans-serif; color: #333; text-shadow: 0 0px 10px #fff; } h1 { color: #333; text-transform: uppercase; font-size: 40px; line-height: 50px; font-weight: 400; margin-top: 20px; } a { color: #999; } p { margin: 0 0 15px 0; } strong { font-weight: 700; } /* Layout */ .navbar { width: 100%; background-color: rgba(0, 0, 0, 0.6); height: 40px; z-index: 9999; position: fixed; } .inner { position: relative; margin: 0 auto; text-align: center; } .navbar a { display: inline-block; border: 1px solid #fff; font-size: 14px; line-height: 24px; border-radius: 3px; padding: 2px 15px; text-decoration: none; margin-top: 5px; } .container { display: table; padding-top: 80px; width: 100%; } .content { display: table-cell; vertical-align: middle; text-align: center; } /* Special */ .sub-title { margin: 50px auto; font-size: 18px; line-height: 23px; text-transform: uppercase; } #more-content { display: none; } /* Media Queries */ @media only screen and (max-width: 340px) { .container { position: relative; display: block; float: left; vertical-align: baseline; margin: 0 auto; padding: 80px 0 0 0; } #more-content { float: left; margin-right: 10px; } body h1 { font-size: 18px; line-height: 23px; } .content, blockquote { display: inline; margin: 0 auto; padding-top: 80px; vertical-align: baseline; } .sub-title { font-size: 14px; line-height: 21px; } .button, p { max-width: 150px; margin: 0 auto; font-size: 15px; line-height: 20px; } html, body, .container { height: auto; } } /* For mobile devices */ @media only screen and (max-width: 767px) { body { /* The file size of this background image is 93% smaller * to improve page load speed on mobile internet connections */ background-image: url(images/background-images-mobile-devices.jpg); } } |
LEAVE A REPLY