背景画像を可変で表示したいだけなのですが、background(背景画像)で指定した画像はheight(高さ指定)の基準がないと表示されません。レスポンシブのシングルページレイアウトを制作する上で、空コンテンツのpaddingの分高さが広がってしまうのを回避したいです。
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
CSS3 スマホサイト制作にかかせないbackground-sizeについて
PHP
1<!doctype html> 2<html <?php language_attributes(); ?>> 3<head> 4 <meta charset="<?php bloginfo( 'charset' ); ?>"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="profile" href="http://gmpg.org/xfn/11"> 7 8 <?php wp_head(); ?> 9</head> 10 11<body <?php body_class(); ?>> 12<div id="page" class="site"> 13 14 15 <header id="masthead" class="site-header"> 16 <nav id="site-navigation" class="main-navigation"> 17 <a class="navbar-brand" href="#"><img class="img-fluid navbar-brand" src="<?php echo get_template_directory_uri(); ?>/images/navi-logo.png" alt="navi-logo"></a> 18 <img class="img-fluid bg-header-img" src="<?php echo get_template_directory_uri(); ?>/images/bg-header.png" alt="bg-header"> 19 <div class="navbar-collapse"> 20 <ul class="navbar-nav"> 21 <li class="nav-item active"> 22 <a class="nav-link" href="#about"><img class="img-fluid navi-about-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-about.png" alt="navi-about"></a> 23 </li> 24 <li class="nav-item"> 25 <a class="nav-link" href="#access"><img class="img-fluid navi-access-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-access.png" alt="navi-access"></a> 26 </li> 27 <li class="nav-item"> 28 <a class="nav-link" href="#news"><img class="img-fluid navi-news-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-news.png" alt="navi-news"></a> 29 </li> 30 <li class="nav-item"> 31 <a class="nav-link" href="#join"><img class="img-fluid navi-join-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-join.png" alt="navi-join"></a> 32 </li> 33 <li class="nav-item"> 34 <a class="nav-link" href="#paper-rally"><img class="img-fluid navi-rarry-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-rarry.png" alt="navi-rarry"></a> 35 </li> 36 <li class="nav-item"> 37 <a class="nav-link" href="#circle-list"><img class="img-fluid navi-circle-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-circle.png" alt="navi-circle"></a> 38 </li> 39 <li class="nav-item"> 40 <a class="nav-link" href="#contact"><img class="img-fluid navi-mail-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-mail.png" alt="navi-mail"></a> 41 </li> 42 <li class="nav-item"> 43 <a class="nav-link" href="#"><img class="img-fluid navi-twitter-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-twitter.png" alt="navi-twitter"></a> 44 </li> 45 </ul> 46 </div> 47 </nav><!-- #site-navigation --> 48 </header><!-- #masthead --> 49 50 <div id="content" class="site-content">
PHP
1<div id="primary" class="content-area"> 2 <main id="main" class="site-main" role="main"> 3 4 <section id="intro" class="intro"> 5 <div class="container"> 6 <div class="row"> 7 <div class="col-md-12"> 8 <div class="section-header"> 9 <h1><img class="img-fluid title-intro" src="<?php echo get_template_directory_uri(); ?>/images/title-intro.png" alt="title-intro"></h1> 10 </div> 11 <p class="lead">説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト</p> 12 </div> 13 </div> 14 </div> 15 </section><!-- .intro --> 16 17 <section id="about" class="about"> 18 <div class="container"> 19 <div class="section-header"> 20 <h2><img class="img-fluid title-about" src="<?php echo get_template_directory_uri(); ?>/images/title-about.png" alt="title-about"></h2> 21 </div> 22 <div class="about-boxes"> 23 <div class="row"> 24 <div class="col-md-3 col-sm-6"> 25 <div class="about-circle"> 26 <div class="about-text"> 27 <h3><img class="img-fluid about-item" src="<?php echo get_template_directory_uri(); ?>/images/title-circle.png" alt="title-circle"></h3> 28 <p>BAROQUE</p> 29 </div> 30 </div> 31 </div> 32 <div class="col-md-3 col-sm-6"> 33 <div class="about-circle"> 34 <div class="about-text"> 35 <h3><img class="img-fluid about-item" src="<?php echo get_template_directory_uri(); ?>/images/title-organizer.png" alt="title-organizer"></h3> 36 <p>うづき</p> 37 </div> 38 </div> 39 </div> 40 <div class="col-md-3 col-sm-6"> 41 <div class="about-circle"> 42 <div class="about-text"> 43 <h3><img class="img-fluid about-item" src="<?php echo get_template_directory_uri(); ?>/images/title-booth.png" alt="title-booth"></h3> 44 <p>未定</p> 45 </div> 46 </div> 47 </div> 48 <div class="col-md-3 col-sm-6"> 49 <div class="about-circle"> 50 <div class="about-text"> 51 <h3><img class="img-fluid about-item" src="<?php echo get_template_directory_uri(); ?>/images/title-date.png" alt="title-date"></h3> 52 <p>2018/3/11</p> 53 </div> 54 </div> 55 </div> 56 </div> 57 </div> 58 </div> 59 </section><!-- .about -->
scss
1/*-------------------------------------------------------------- 2# Body 3--------------------------------------------------------------*/ 4.section-header { 5 margin-bottom: 4rem; 6} 7 8/*-------------------------------------------------------------- 9# Buttons 10--------------------------------------------------------------*/ 11.btn { 12 display: inline-block; 13 font-weight: 400; 14 text-align: center; 15 white-space: nowrap; 16 vertical-align: middle; 17 -webkit-user-select: none; 18 -moz-user-select: none; 19 -ms-user-select: none; 20 user-select: none; 21 border: .1rem solid transparent; 22 padding: 1rem 4rem; 23 font-size: 1rem; 24 line-height: 1.5; 25 border-radius: .4rem; 26} 27 28.btn-access { 29 background-color: $white; 30 color: $blue; 31 border: .2rem solid $blue; 32} 33 34.btn-join { 35 background-color: $white; 36 color: $green; 37 border: .2rem solid $green; 38} 39 40.btn-contact { 41 background-color: transparent; 42 color: $white; 43 border: .2rem solid $white; 44 cursor: pointer; 45} 46 47/*-------------------------------------------------------------- 48# Navigation 49--------------------------------------------------------------*/ 50.main-navigation .bg-header-img { 51 position: fixed; 52 top: 0; 53 left: 0; 54 width: 100rem; 55 z-index: 100; 56} 57 58.main-navigation .navbar-brand { 59 position: fixed; 60 top: 1.6rem; 61 left: 13.3rem; 62 z-index: 200; 63} 64 65.navbar-nav .nav-item .navi-about-img { 66 position: fixed; 67 top: 4rem; 68 left: 22rem; 69 z-index: 100; 70} 71 72.navbar-nav .nav-item .navi-access-img { 73 position: fixed; 74 top: 4rem; 75 left: 30rem; 76 z-index: 100; 77} 78 79.navbar-nav .nav-item .navi-news-img { 80 position: fixed; 81 top: 4rem; 82 left: 38rem; 83 z-index: 100; 84} 85 86.navbar-nav .nav-item .navi-join-img { 87 position: fixed; 88 top: 4rem; 89 left: 46rem; 90 z-index: 100; 91} 92 93.navbar-nav .nav-item .navi-rarry-img { 94 position: fixed; 95 top: 4rem; 96 left: 64rem; 97 z-index: 100; 98} 99 100.navbar-nav .nav-item .navi-circle-img { 101 position: fixed; 102 top: 4rem; 103 left: 52rem; 104 z-index: 100; 105} 106 107.navbar-nav .nav-item .navi-mail-img { 108 position: fixed; 109 top: 4rem; 110 right: 16rem; 111 z-index: 100; 112} 113 114.navbar-nav .nav-item .navi-twitter-img { 115 position: fixed; 116 top: 4rem; 117 right: 12rem; 118 z-index: 100; 119} 120 121/*-------------------------------------------------------------- 122# SiteHeader 123--------------------------------------------------------------*/ 124.site-header { 125 height: 0; 126 padding-top: 69.44%; 127 background: url(images/mainImage.png) center center no-repeat; 128 background-size: contain; 129} 130 131/*-------------------------------------------------------------- 132# Intro 133--------------------------------------------------------------*/ 134.intro { 135 padding: 10rem 0; 136} 137 138.title-intro { 139 @include media-breakpoint-down(sm) { 140 margin: 0 auto; 141 } 142} 143 144.intro p { 145 text-align: center; 146} 147 148/*-------------------------------------------------------------- 149# About 150--------------------------------------------------------------*/ 151.about { 152 position: relative; 153 padding: 2rem 0 4rem 0; 154 background: url(images/bg-about.png) center /contain no-repeat; 155} 156 157.about-boxes { 158 position: absolute; 159 top: 43rem; 160 right: 0; 161 bottom: auto; 162 left: 0; 163 width: 1050px; 164 height: 240px; 165 margin: 0 auto; 166} 167 168.about-img { 169 position: absolute; 170 top: 32rem; 171 left: 64rem; 172 @include media-breakpoint-down(sm) { 173 margin: 0 auto; 174 } 175} 176 177.about .about-circle { 178 width: 15rem; 179 height: 15rem; 180 border-radius: 50%; 181 background-color: $white; 182} 183 184.about .about-circle .about-text { 185 padding-top: 4rem 186} 187 188.about .about-circle .about-text h3, 189.about .about-circle .about-text p { 190 text-align: center; 191} 192 193.about .about-circle .about-text p { 194 margin-top: 2rem; 195}
回答1件
あなたの回答
tips
プレビュー