スモール起業ビルダー・ZONOのブログ

【CSS】画像を背景にして、文字を入力する方法【コピペでOK】

CSS MEMO & TEMPLATE

本記事では、画像を背景にして、文字を入力するためのCSSを掲載した記事です。
コピペでOKなので、ぜひ使ってみてください。ブログにちょっとしたアクセントをつけることもできるので、読者にアピールしたいテキストなどに使うといいと思います。

【CSS】画像を背景にして、文字を入力する方法【コピペ用】

イメージと、ソースコードは下記のとおりです。

実装イメージ

ここに文字を入力すると、背景画像の上にテキストを乗せることができます\(^o^)/

HTML

<p class="bg-img-text">
ここに文字を入力すると、背景画像の上にテキストを乗せることができます\(^o^)/
</p>

CSS

/* 画像の背景にして文字入力 */
p.bg-img-text{
	margin: 40px;
	padding: 20px;
	color: #333333;
	background-image: url("ここに画像リンクを入れる")
}

以上となります。

こちらも参考になると思うので、ぜひどうぞ。

稼げる「無料ブログ勉強会」

朝5時〜 or 夜9時〜の時間帯で「ブログ運営の基礎」が無料で学べます。「Zoom」を利用して開催しますので、ご自宅からご参加可能です😌

参加者限定の特典があります

参加特典は「60分の個別相談」&「980円で販売しているブログ企画室に無料ご招待」なので、お得感満載で結構学べると思います。

嬉しいお声をいただいております

5時起床。今日は朝からオンラインでホームページ作りの勉強会でした。サイト構築にHTMLやCSSの基礎理解は必須。仕組みに慣れればそんなに難しくないです。固定費はサーバー代とドメイン代ぐらいでそんなにお金もかかりません。無料で有益でここまで高品質な勉強会って中々ないんじゃないかな🙇‍
朝5時。しかも人多い。ゾノさんはZoomの扱いがすごいスマート。全てに無駄がない。WordPressのcssの変更の仕方が参考になりました。
  • 7月17日㈮ 5:00〜7:00【残り1名】
  • 7月17日㈮ 21:00〜23:00【残り2名】
  • 7月18日㈯ 5:00〜7:00【残り2名】
  • 7月18日㈯ 21:00〜23:00【残り1名】
» 今すぐ「無料ブログ勉強会」に予約する

お知らせ:厳選した下記のコンテンツがおすすめです

個人から、中小企業様向けに対応しており、Webメディア構築 or リモートワーク(テレビ会議システム)の導入をご検討の方は、ぜひどうぞ🙇‍

おすすめコンテンツ

無料コンテンツ

有料コンテンツ

当ブログと他のサイトの圧倒的な違いは、様々な疑問や悩みを解決するために【無料体験レッスン】30分の無料相談会&体験レッスン(オンライン開催)に初回限定で参加できることです。

どうしても分からなかったり、1人で悩むことがあればご相談ください。

その他、ご相談&ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ

チップをいただけると、心から喜びます


僕は、こんな人です

ゾノ
当ブログの筆者。4年間勤めた高校教師を退職後にITベンチャーに転職し、2016年に独立。「外出せずに学べるパソコン教室」を運営し、ブログ初心者のサポートに取り組んでいる。生徒数は累計160名。ブログ初心者から抜け出す方法や、不登校などの教育問題について発信している。
» プロフィール詳細はこちら

人気記事【ブログ書くことない】ブログ書き方テンプレートで解決【ひな形】

人気記事【持ち物公開】場所を問わないノマドワーカーのバックパックLIFE