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

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

新規登録して質問してみよう
ただいま回答率
85.35%
ウィンドウ

コンピューター用語において、ウィンドウとはユーザとプログラムのやり取りを可能にするGUIの枠組みのことをいいます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

12245閲覧

背景画像をウィンドウからはみ出させるにはどの様にしたら良いでしょうか?

19941224ngng

総合スコア19

ウィンドウ

コンピューター用語において、ウィンドウとはユーザとプログラムのやり取りを可能にするGUIの枠組みのことをいいます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2020/04/25 06:07

イメージ説明
このように背景画像が上にはみ出した様なデザインにしたいのですが、どの様にしたらこの様にできるでしょうか?
試したことは、.header__imageのbackground-sizeを縦に少し大きくして900pxに指定し、padding-bottom:72px;を指定したりしましたが、うまく表現できませんでした。
わかる方おりましたらご教授お願いいたします。
下記は現在のコードの状況とプレビュー画像です。

html

1<header class="wrapper"> 2 <div class="header__image"> 3 <div class="header__pc"> 4 <h1 class="header__logo"> 5 <a href="#"><img src="img/header.png" alt="144Labロゴ" /></a> 6 </h1> 7 <ul class="header__nav"> 8 <li class="header__list"> 9 <a href="#">ABOUT</a> 10 <a href="#"><span>企業情報</span></a> 11 </li> 12 <li class="header__list"> 13 <a href="#">NEWS</a> 14 <a href="#"><span>ニュース</span></a> 15 </li> 16 <li class="header__list"> 17 <a href="#">SEARVICE & PRODUCT</a> 18 <a href="#"><span>サービス&製品情報</span></a> 19 </li> 20 <li class="header__list contact"> 21 <a href="#">CONTACT</a> 22 <a href="#"><span>お問い合わせ</span></a> 23 </li> 24 </ul> 25 </div> 26 </div> 27 </header>

該当部分css

css

1body { 2 width: 1280px; 3 height: 832px; 4} 5 6.wrapper { 7 width:100%; 8 height: 793px; 9 background-color: #F2F3F7; 10} 11 12.header__image { 13 width: 980px; 14 height: 822px; 15 padding-top: 59px; 16 background-image: url("menta.svg"); 17 background-size: 980px 822px; 18 background-repeat: no-repeat; 19 margin: 0 auto; 20}

イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

background-positionでtopをマイナスにするとかでしょうか。

投稿2020/04/25 06:10

m.ts10806

総合スコア80875

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

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

m.ts10806

2020/04/25 06:16

ただ、ずらしたぶんだけ他の箇所に影響するので別途background-color入れるとか考慮は必要そう。「そういう画像を作る」のが一番手っ取り早そうにも思います。
TatamiSteak

2020/04/25 06:25

実際、参考元のサイトも背景がウィンドウからはみ出しているわけではなく「そういう風に見える画像」みたいですね。 https://144lab.com/
19941224ngng

2020/04/25 07:02

background-positionで縦方向の位置を調整し、background-sizeでサイズを調整することで解決できました! ありがとうございます????‍♂️
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問