【React】MVに背景画像を表示させる｜ポートフォリオサイトの作り方

作成日: 2025年10月08日更新日: 2025年10月08日

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Node.js:v18.14.0
npm:9.3.1
react:18.2.0
react-dom:18.2.0
react-router-dom:6.8.2
typescript:4.9.5
mui:5.11.10
mui/icons-material:5.11.11

ReactでMVに背景画像を表示させる手順

ReactでMVに背景画像を表示させる手順を解説します。

画像を設置する位置を決める

まずは画像を設置する位置を決めます。画像フォルダの設置する場所は「public側」にするか、「src側」にするかはプロジェクトによって異なりますが、今回は「src側」に画像を設置します。


1// react-portfolio-app\src\assets\images\
2react-portfolio-app
3└─src
4    └─assets
5    　  └─images
6            └─mv.jpg

画像をインポートする

次に画像をインポートします。


1// react-portfolio-app\src\pages\homes\top.tsx
2import React from "react";
3import Box from "@mui/material/Box";
4import Container from "@mui/material/Container";
5import Grid from "@mui/material/Grid";
6import Typography from "@mui/material/Typography";
7import Button from "@mui/material/Button";
8
9+ import MV from "../../assets/images/mv.jpg"
10
11const Top: React.FC = () => {
12    return(
13        <>

コンポーネントの階層からみたフォルダの位置によって画像パスはかわります。

背景画像を表示する

次に背景画像を表示します。背景画像を表示させるには、cssでbackground-imageに背景画像のパスを割り当てる、コンポーネント内でスタイルをインラインで指定する方法があります。インラインでスタイルを指定することで、CSSファイルを使用せずに背景画像を設定することができますが、スタイルの管理が複雑になりやすくなるため、使用する場合は注意が必要です。今回はコンポーネント内でスタイルをインラインで指定する方法で記述しています。


1// react-portfolio-app\src\pages\homes\top.tsx
2
3+           <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}>

wrapperの役割であるBox部分にbackgroundImageをインラインで記述していきます。 JavaScriptでは「(バッククォート文字)」を使用することによってテンプレートリテラルにプレースホルダーを含めることができます。プレースホルダーはドル記号と波括弧 (${expression}) で記述することにより、プレースホルダー内の式とバッククォート文字「」の間にあるテキストが関数に渡されます。「'（シングルクォート）」や「"（ダブルルクォート）」の場合は「+」で文字列を連結させるように記述します。

MV部分のデザインを整える

最後にMV部分のデザインを整えます。


1// react-portfolio-app\src\pages\homes\top.tsx
2
3import MV from "../../assets/images/mv.jpg"
4
5const Top: React.FC = () => {
6    return(
7        <>
8+           <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}>
9+               <Container maxWidth='md' sx={{ position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%) translateY(-50%)" }}>
10+                   <Grid container rowSpacing={2} columnSpacing={2} sx={{ textAlign: "center",color: "#FFFFFF", textShadow: "1px 1px 3px #000000" }}>
11+                       <Grid item xs={12} md={12}>
12+                           <Typography component="h2" variant="h2">
13+                               MVタイトル
14+                           </Typography>
15+                       </Grid>
16+                       <Grid item xs={12} md={12}>
17+                           <Typography>
18+                               テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
19+                           </Typography>
20+                       </Grid>
21+                   </Grid>
22+               </Container>
23+               <Button variant="contained" size="large" sx={{ position: "absolute", bottom: "10%", left: "50%", transform: "translateX(-50%)" }}>
24+                   LearnMore
25+               </Button>
26+           </Box>

wrapperの役割であるBoxにpositionプロパティにrelativeを設定し、MVのタイトルとテキスト部分、ボタン部分の位置を整えています。ボタン部分もコンテナーで囲むようにしておけば、ボタンの数を簡単に増やすこともできますので、デザインに合わせて調整してください。

おわりに

ReactでMV部分に背景画像を表示させる手順を解説してきましたが、いかがだったでしょうか。「`(バッククォート文字)」と「'（シングルクォート）」、または「"（ダブルルクォート）」では、記述の仕方が少し異なりますので、画像が表示されない場合は見直してみてください。是非、ReactでポートフォリオサイトのMV部分に背景画像を表示しておしゃれなデザインにしていきましょう。