背景画像に乗せた画像と文字が、横長の画面にすると、背景を超えてしまいます。

Question

### 前提・実現したいこと
背景画像を設定している、#cover部分に
ロゴの画像と文字を納めたいです。

おそらく、positionの理解や、単位の理解が及んでいないと感じていますが
この問題を解決するにあたり、そのあたりの理解を手伝っていただけないでしょうか。

どうぞ、よろしくお願いします。
問題が起きている時の画像

該当のソースコード

ソースコード
<div id="cover" class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="row align-items-center">
                        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                            <img class ="logo img-fluid" src="img/logo-green.PNG" alt="logo-image">
                        </div>
                        <div class="text col-12 col-sm-12 col-md-6 col-lg-6">
                            <h1>ORISSA</h1>
                            <p>"アナタ"だけの空間で<br>お家でも扱いやすいスタイルに。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

#cover{
    height: 100vh;
    background-image: url("../img/mirror.JPG");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position:relative;
    color: #e6d6b4;
    z-index: -2;
}

#cover:before{
    content: '';
    background: inherit;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
  }

#cover h1{
    font-size: 10.8vw;
    font-family: 'Philosopher','Caveat',sans-serif;
    filter: drop-shadow(5px 5px 5px #aaa);
    top: 64%;
    z-index: 1;
    text-align: center;
}


#cover p{
    top: 72%;
    font-size: 2.800vw;
    z-index: 1;
    text-align: center;
    filter: drop-shadow(5px 5px 5px #aaa);
}

#cover img{
    z-index: 1;
    opacity: 1;
    padding: 0%;
    margin: 0%;
}

#cover img:before{
    position: absolute;
    z-index: 1;
    filter: drop-shadow(5px 5px 5px #aaa);
    opacity: 1;
}

試したこと

初めのrowの範囲は#coverの範囲に収まっていたので、

<div class="row"> <div class="col-12 col-sm-12 col-md-12 col-lg-12"> この部分を閉じタグと共に削除しましたが、画像と文字を囲むcolの高さは、＃coverを超えた高さです。

補足情報（FW/ツールのバージョンなど）

colにheight:100%;を追記すると
colの高さは動画の通り、#coverの高さに収まりました。
しかし、肝心の画像と文字は、期待通りの
背景画像の中心の高さで横並びにはなりませんでした。
height100%にした時の状態
ここにより詳細な情報を記載してください。

Comments

[hatena19]

画像はリンクではなくエディターから挿入してください。
エディターの上のツールバーの「画像の挿入」ボタンをクリックしてアップロードできます。

[hatena19]

クラス名がbootstrapのようですが、Bootstrapを使用しているなら、タグに追加してください。それと、Bootstrapのバージョンも明記してください。

Answer 1

申し訳ございません。自己解決いたしました。
問題は、ロゴの画像が長方形で囲まれたpngだったことでした。
正方形にトリミングすると、綺麗に横並びになりました。

Answer 2

背景画像の中心の高さで横並び

こういうことでしょうか？

<div class="row" style="height: 100%;">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                <div class="row align-items-center" style="height: 100%;">

Comments

[hemuu]

ご回答ありがとうございます。残念ながらそちらでは解決いたしませんでした。
表示内容は変わらずです。