質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1091閲覧

背景画像が2つになる

risacuspin

総合スコア18

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/05/12 15:21

編集2019/05/12 16:04

ヘッダーに背景画像を表示したいのですが、cssで画像のurlを書いて確認すると同じものがあと1つ表示されています。
どうしたら1つだけ表示することができますか?

html

1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Shiro</title> 7 <link rel="stylesheet" href="css/style.css"> 8</head> 9<body> 10 <header class="header"> 11 <div class="u-content-wrapper"></div> 12 </header> 13 <section class="concept"> 14 <div class="u-content-wrapper"></div> 15 </section> 16 <section class="work"> 17 <div class="u-content-wrapper"></div> 18 </section> 19 <section class="florist"> 20 <div class="u-content-wrapper"></div> 21 </section> 22 <section class="shop-information"> 23 <div class="u-content-wrapper"></div> 24 </section> 25 <section class="contact"> 26 <div class="u-content-wrapper"></div> 27 </section> 28 <footer class="footer"> 29 <div class="u-content-wrapper"></div> 30 </footer> 31 32<!--header--> 33 <header class="header"> 34 <div class="header__nav"> 35 <div class="u-content-wrapper header__nav__wrapper"> 36 <div class="header__nav__logo">Shiro</div> 37 <div class="hamburger-menu"> 38 <span class="hamburger-menu__line"></span> 39 </div> 40 </div> 41 </div> 42 </header> 43 44 <div class="u-content-wrapper"> 45 <h1 class="header__title">Shiro</h1> 46 <p class="header__title__sub">White flower shop</p> 47 </div> 48<!--/header-->

css

1*, *::before, *::after { 2 box-sizing: border-box; 3} 4body { 5 margin: 0; 6 font-family: sans-serif; 7 font-size: 16px; 8 color: #2b2b2b; 9} 10 11h1, h2, h3, p { 12 margin: 0; 13 padding: 0; 14} 15 16a { 17 color: #2b2b2b; 18 text-decoration: none; 19} 20 21section { 22 text-align: center; 23} 24 25.u-content-wrapper { 26 max-width: 960px; 27 margin: 0 auto; 28} 29 30/*------------------------------------------------------ 31 * header 32------------------------------------------------------*/ 33.header { 34 position: relative; 35 width: 100%; 36 height: 620px; 37 background: url("../Web 1280 – 1/header.png"); 38 background-size: cover; 39 text-align: center; 40 color: #fff; 41} 42 43.header__nav { 44 position: absolute; 45 top: 40px; 46 left: 0; 47 width: 100%; 48 height: 64px; 49} 50.header__nav__wrapper { 51 display: flex; 52 justify-content: space-between; 53 align-items: center; 54} 55 56.header__nav__logo { 57 font-size: 36px; 58} 59 60.header__title { 61 padding-top: 240px; 62 font-size: 120px; 63 font-weight: normal; 64} 65 66.header__title__sub { 67 word-spacing: 4px; 68} 69 70.header__title__sub::before, 71.header__title__sub::after { 72 content: ''; 73 display: inline-block; 74 width: 12px; 75 height: 2px; 76 margin: 0 8px; 77 background: #fff; 78 vertical-align: middle; 79} 80 81.hamburger-menu { 82 position: relative; 83 width: 32px; 84 height: 64px; 85 cursor: pointer; 86} 87 88.hamburger-menu__line, 89.hamburger-menu__line::before, 90.hamburger-menu__line::after { 91 position: absolute; 92 left: 0; 93 display: block; 94 width: 32px; 95 height: 1px; 96 background: #fff; 97} 98 99.hamburger-menu__line::before, 100.hamburger-menu__line::after { 101 content: ""; 102} 103 104.hamburger-menu__line { 105 top: 50%; 106} 107 108.hamburger-menu__line::before { 109 top: calc(50% - 8px); 110} 111 112.hamburger-menu__line::after { 113 top: calc(50% + 8px); 114} 115/*------------------------------------------------------ 116 /header 117------------------------------------------------------*/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/05/12 15:28

HTMLも提示してください。また、問題が起こっている状態のスクリーンショットなども提示されたほうが状況がわかりやすいです。
guest

回答1

0

ベストアンサー

.headerの付いている要素が2つあるからです。どちらかのクラスを変えることを検討してください。

投稿2019/05/12 16:04

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

risacuspin

2019/05/12 16:20

コメントありがとうございます! すみません、要素が何行目と何行目かお聞きしてもいいですか?
kei344

2019/05/12 16:21

<body> <header class="header"> <div class="u-content-wrapper"></div> </header> と <!--header--> <header class="header"> <div class="header__nav">
risacuspin

2019/05/12 16:26

内容が重複していたので上の要素を消したところ1つになりました! ありがとうございます!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問