React Zemin (Background) Resmi Nasıl Eklenir?

Web tasarımı yaparken sıklıkla kullandığımız zeminlere resim eklem işlemini React JS ile de yapabiliriz. Bunun için farklı yollar bulunmaktadır. Bu yazımızda zemin rengi eklemenin farklı yollarını inceleyeceğiz.

Bir Urlden Zemin Resmi Ekleme

İlk olarak bir websayfasında olan bir resimi React uygulamasında zemin resmi olarak kullanmayı görelim.

function App() {
    return (
        <div style={{backgroundImage: 'https://netbilio.com/wp-content/uploads/background-image-1.jpg'}}>
            Sayfa içeriği
        </div>
    )
}

Bu şekilde farklı bir adres üzerindeki resimi zemin resmi olarak uygulamaya ekleyebiliriz.

React Public Klasöründeki Resimi Background Resmi Olarak Kullanma

React puclic klasörü özel bir klasördür. Oluşturduğumuz uygulama içerisinden kolayca ulaşabileceğimiz bir klasördür. public klasörü içerisindeki resimleri sadece isimleri ile veya public klasörü içerisinde bulunan farklı bir klasörde ise o klasör ismi ile çağırabiliriz. Bu normal bir web sitesi içerisinde bir resim kullanmaya benzer bir yöntemdir.

Bunun için öncelikle resimi uygulama klasörü içerisinde bulunan public klasörü içerisine kopyalıyoruz. Sonrada kodumuzu aşağıdaki gibi hazırlıyoruz.

function App() {
    return (
        <div style={{
                backgroundImage: 'url(background-image-1.jpg)',
            }}>
            Sayfa içeriği
        </div>
    )
}

Yukarıdaki örnekte gördüğümüz gibi, public klasörü içerisindeki bir resimi zemin resmi olarak kullanacağımız zaman sadece ismini kullanmamız yeterli olacaktır.

src Klasörü İçerisindeki Bir Resimi import Ederek Background Resimi Olarak Kullanma

Bir farklı yöntem olarak src klasörü içerisinde veya uygulamanın kök klasörü içerisinde olan bir resimi import ederek kullanmayı görelim.

import React from 'react';
import background from './img/background-image-1.jpg';

function App() {
    return (
        <div style={{
        backgroundImage: `url(${background})`,
      }}>
            Sayfa içeriği
        </div>
    )
}

Yukarıdaki örnekte componentin bulunduğu dizin içerisinde ( bu genellikle src klasörüdür) oluşturulmuş olan bir img klasörü içerisinde bulunan background-image-1.jpg isimli bir resim dosyasını import ediyoruz.

Burada dikkat edeceğimiz nokta, bu bir nesne (string) olarak import edildiğinden bunu bir değişken gibi kullandığımızdır. Bu durumda ters tek tırnak işaretleri arasında kullanıyoruz ve değişken formatında yazıyoruz.

backgroundImage: `url(${background})`

React Zemin Resimi (background image) Özelliklerini Ayarlama

Farklı şekillerde background image kullanmasını gördük. Şimdi zemin resimlerini eklerken zemin resimi özelliklerini de ayarlamayı görelim. Bu tıpkı Javascript üzerinden işlem yapmak gibidir.

function App() {
    // Not : Bu örneğimiz standard create-react-app
    // ile oluşturulmuş bir uygulamada test 
    // edilmiştir ve bu nedenle
    // ayrıca App css sınıfı kullanılmıştır.
    return (
        <div className='App' style={{
                backgroundImage: 'url(background-image-1.jpg)',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
                backgroundSize: 'auto',
            }}>
            Sayfa içeriği
        </div>
    )
}

Son örneğimizin ekran çıktısı aşağıdaki gibi olacaktır.

Css Sınıfı Kullanma

Yine yaptığımız bu işlemleri farklı sınıflar oluşturarak da kullanabiliriz. Mesela public klasöründe bulunan resimi kullanarak yukarıdaki örneği kullanarak işlem yapmayı deneyebiliriz. Bunun için styles.css şeklinde bir dosya oluşturalım. Ve içeriğini şu şekilde yapalım.

.zemin {
    background-image: url('background-image-1.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}

Şimdi bu dosyayı uygulamamıza import ederek kullanalım.

import React from 'react';
import 'App.css';
import 'styles.css';

function App() {
    // Not : Bu örneğimiz standard create-react-app
    // ile oluşturulmuş bir uygulamada test 
    // edilmiştir ve bu nedenle
    // ayrıca App css sınıfı kullanılmıştır.
    return (
        <div className='App zemin'>
            Sayfa içeriği
        </div>
    )
}

Yukarıdaki örneği çalıştırdığınızda bir önceki örnek ile benzer bir sonuç alıyoruz. Bu şekilde kod okunurluğunu artırdığımız gibi ayrıca css sınıflarını (class) ayrı bir dosyada tutmuş oluyoruz.

Sonuç

React JS ile uygulama geliştirirken zemin resmi (background image) kullanmak için farklı yöntemler bulunur. Bunlardan bazılarını yukarıda anlattık.

Eklemek istedikleriniz veya sormak istedikleriniz varsa yorumlarda yazabilirsiniz.