Question 45706 in CSS Question posted in
Some basic documentation can be found here.

How to make a background picture responsive – CSS

Currently i am building a website in React.JS

I am trying to do the following, in my Home.JS file i want to have a background image that is in full hd : 1920px by 1080px;

What i am trying to achieve is that
page does the following :
enter image description here
I tried adding it as css but i need to define a width and height, and i am unsure on what to put as if i put the true size it is too big for my browser.
What should i do?

Here is my home function :

export default function Home() {
    return (
        <div className='home'><h1> Le concept </h1>
            <h2>Qu'est ce que le 4L Trophy ?</h2>
            <p>Le 4L Trophy est une aventure exceptionnelle qui attire chaque année des milliers de jeunes étudiants
                venus du monde entier. C'est une course humanitaire de plus de 6000 km à travers la France, l'Espagne
                et le Maroc, au volant de la mythique Renault 4L. Le but de cette aventure n'est pas la compétition,
                mais plutôt l'entraide et la solidarité. Les participants doivent en effet apporter des fournitures
                scolaires aux enfants défavorisés du Maroc, et ce sont ces actions humanitaires qui sont récompensées.
                Le 4L Trophy est donc bien plus qu'une simple course : c'est une expérience inoubliable,
                un véritable défi physique et mental, et surtout une occasion unique de découvrir de nouveaux horizons
                tout en faisant une bonne action.</p>
        </div>
    );


.home{
    width: 1920px;
    height: 1080px;
    background-image: url("../assets/backgroundImage.png");
    background-size: cover;
background-color: #2F303A;
}

broken css?

Tags:

2

Answers


  1. 0

    You can try aspect-ratio.

    .home {
    width: min(100%, 1920px);
    aspect-ratio: 16 / 9;
    background-image: url("../assets/backgroundImage.png");
    background-size: cover;
    background-color: #2F303A;
}
    Login or Signup to reply.
  2. 0

    Try something like this in your CSS:

    .home {
  background-image: url('your-image-url.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

    Then, in your React component, add the container class to the element you want to apply the background image to:

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

function App() {
  return (
    <div className="home">
      {/* your content */}
    </div>
  );
}

export default App;

    By setting the background-size property to cover, the image will be scaled to cover the entire container element, while maintaining its aspect ratio. This will ensure that the image looks good on screens of different sizes and resolutions.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search