背景画像の余白の消しかたについて

前提・実現したいこと

background-imgの下に余白ができてしまいそれを消したいのですが、どうしたらいいですか？

発生している問題・エラーメッセージ

cssのbackground-imgの下に余白。

該当のソースコード

<html> <div class="top-wrapper"> <h1 class="title"></h1> <p></p> </div> <css> .top-wrapper { background-image: url(IMG_7301.jpeg); display: block; background-position: center bottom; padding-top: 180px; background-size: cover; height:800px; width: 100%; position: relative; } ### 試したこと line-height:0; vertical-align:top; display:block; margin:0; padding:0; を試してみましたがどれもダメでした。

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

Webページの隅の余白のことですよね。
実はmarginが設定されているのはdiv要素ではなく、body要素自体なんです。

ということで、

css
1body{
2margin:0;
3}

と書き加えれば解決すると思います。

投稿2019/10/16 19:20

aoies

総合スコア331

jpegおよびjpgで質問主が透明に見えてる部分はデータ上、「白色」です。
質問主が「白色」に見える部分を「透明」と認識させたい場合、そこには白色ではなく「透明」と認識させる「色」を定義させたうえで、一般的に「png」形式で保存する必要があります。

まず、「透明色」を学んだあと、GIMPなりのフリーツールを用いて、質問主が使おうとしてる画像に改めて「透明色」を与えて、「PNG」ファイルとして保存する所からだと思います。

どうしても、今持っているjpeg画像の「（※１）”完全に”）白く見える部分」をpngにしたいなら
https://www.peko-step.com/tool/alphachannel.html　こちらで加工するのがよいですが、
jpeg自体が劣化してるので、元画像をちゃんとα付きのpngとして保存するのが綺麗さで言うと賢明です。
（※１：主が「白く」見えると思っていても、線の境界線など、”完全に白ではない”色は沢山あるので、その部分の透過処理は期待できないと思ってください）

投稿2019/10/16 16:14

編集2019/10/16 16:28