xxxxxxxxxx
style={{ backgroundImage:`url(${"https://picsum.photos/200/300"})` }}
xxxxxxxxxx
style={{
backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
}}
xxxxxxxxxx
<div
className="w-full h-48 bg-no-repeat bg-cover"
style={{ backgroundImage: "url(" + externalImageUrl + ")" }}
></div>
// or
import bg from "../public/bg.svg";
<div
style={{ backgroundImage: "url(" + bg.src + ")" }}
className="w-1/2 h-screen bg-no-repeat bg-cover bg-center"
></div>
xxxxxxxxxx
import React, { useState } from 'react';
const PhotoBackground = () => {
const [background, setBackground] = useState('');
const handleBackgroundChange = (e) => {
setBackground(e.target.value);
};
return (
<div style={{ background: background, minHeight: '100vh' }}>
<h1>Photo with Custom Background</h1>
<img src="your_photo_url" alt="Your Photo" />
<input type="color" value={background} onChange={handleBackgroundChange} />
</div>
);
};
export default PhotoBackground;