<!DOCTYPE html>
<html lang="ja">
<!-- Head tag -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/png" href="https://contents.ogatism.net/ogatism.png">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<!--Description-->
<meta name="description" content="cssのbackgroundプロパティを使えば画像を指定することができますが、これなかなか問題を起こしやすい。
backgroundって要は壁紙なのでです。
だから高さとか幅の概念が無いのですよね。">
<!--Author-->
<meta name="author" content="Yuji Ogata">
<!--Open Graph Title-->
<meta property="og:title" content="background imageの注意点"/>
<!--Open Graph Site Name-->
<meta property="og:site_name" content="ogatism"/>
<!--Page Cover-->
<meta property="og:image" content=""/>
<!-- Title -->
<title>background imageの注意点 - ogatism</title>
<style>
</style>
<!-- Custom CSS -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-43476132-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-43476132-1');
</script>
<meta name="generator" content="Hexo 5.4.1"><link rel="alternate" href="/feed.xml" title="ogatism" type="application/atom+xml">
</head>
<body>
<div class="container zinnia-page">
<header>
<div class="zinnia-logo text-center">
<h1><a href="index.html"><img src="https://contents.ogatism.net/ogatismlogoB1.png" alt="" width="800" height="320" class="blog-header"></a></h1>
</div>
<div class="zinnia-menu text-center">
<nav class="navbar">
<div class="navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="/categories/fortune/">オガティの星占い</a></li>
<li><a href="/about/">オガティとは</a></li>
<li><a href="/post/swiss/swiss_index/">Swiss Ephemeris</a></li>
<li><a href="/biz/">依頼・問い合わせ</a></li>
</ul>
</div>
</nav>
</div>
</header>
<div class="zinnia-main-content">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<article class="single-blog-post">
<div class="post-header text-center">
<div class="single-tag">
<a href="/categories/diary/">雑記</a>
</div>
<h2 class="post-title">
<a href="/post/css-background-image">background imageの注意点</a>
</h2>
</div>
<div class="post-thumb">
<a href="/post/css-background-image"> <img src="https://contents.ogatism.net/ogatismlogoC1.png" alt=""></a>
<div class="post-overlay-meta">
<ul class="post-meta pull-left">
<li class="date">2016/06/08</li>
</ul>
</div>
</div>
<div class="post-content">
cssのbackgroundプロパティを使えば画像を指定することができますが、これなかなか問題を起こしやすい。
backgroundって要は壁紙なのでです。
だから高さとか幅の概念が無いのですよね。
<span id="more"></span>
結果的に
<pre>
div {
background: url(image.jpg);
}
</pre>
と書いても何も表示されない。
要素内に何もないから。
で、
<pre>
div {
background: url(image.jpg);
width: 100%;
height: 50px;
}
</pre>
とかやる必要が出てくる。
しかしこれもまた問題が生じる。
ブラウザの幅を狭めても縮小されないため、右側が切れてしまうのである。
画像じゃなくて壁紙なのだから。
で、
<pre>
div {
background: url(image.jpg);
background-size: contain;
width: 100%;
height: 50px;
}
</pre>
とする。
これで完璧か、と思いきやこれでも困ったことになる。
ウィンドウの幅を狭めると確かに画像も縮小するのだけど、高さは広げても狭めても50pxのままになってしまう。
とまあbackgroundってのは困った作りになっているのですよ。
その上にテキストを乗っける時とか使いがちだけど、場合によってははみ出るのでimgの上にabsoluteで乗っけるなどの対策を取ったほうが安心できますね。
cssは色々な書き方がある分トラップも多いのでお気をつけてくださいませ。
</div>
<div class="single-post-meta ">
<div class="single-tag ">
</div>
</div>
</article>
</div>
</div>
</div>
<hr>
</div>
<footer class="zinnia-footer">
<div class="container">
<div class="footer-social">
<div class="footer-logo text-center">
オガティ（緒形雄二）
</div>
<div class="footer-social-link">
</div>
</div>
</div>
<div class="container footer-copyright-text text-center">
<p>
© 2012-2025 ogatism/Yuji Ogata<br>
© 2017 Zinnia - Designed & Developed by <a href="">ShapedTheme</a>
</p>
</div>
</footer>
<!-- After footer scripts -->
</body>
</html>