NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

背景画像の位置を右や下を基点に指定する

2014年12月11日CSSテクニック

背景画像の位置を右や下を基点に指定する

対応ブラウザは限られていますが、background-positionプロパティの数値の前にrightやbottomを書き加えることで、背景画像の位置を右や下を基点に指定することが可能です。

デモページ

HTML

<nav id="nav">
	<span class="btn" id="prev"><a href="#">prev</a></span>
	<span class="btn" id="next"><a href="#">next</a></span>
</nav>

CSS

#nav { text-align: center; }
.btn {
	display: inline-block;
	margin: 0 6px;
}
.btn a {
	border-radius: 4px;
	border: 1px solid #ffffff;
	padding: 12px 50px 12px 50px;
	background-color: #52d3ff;
	background-repeat: no-repeat;
	text-decoration: none;
	color: #ffffff;
}
#prev a {
	padding-left: 60px;
	background-image: url(ico_prev.png);
	background-position: 10px 50%;
}
#next a {
	padding-right: 60px;
	background-image: url(ico_next.png);
	background-position: right 10px bottom 50%;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 背景画像の位置を右や下を基点に指定する

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com