CODEWITHSUNDEEP
htmlcssreactjs
Harry Wardana
Harry Wardana

Reputation: 277

Full image background

how to make a full background on the page? Is there something wrong with my code?

enter image description here

My code

return (

        <div className="bg welcome container text-center" style={{

        }}>
            <div className="row">
                <div className="col left-side  d-flex align-items-center justify-content-center flex-column text-center">
                    <h3 className="title-text">Your title place here</h3>
                    <p className="text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque reprehenderit rerum ut earum sunt tempora sint quasi.</p>
            </div>
        </div>
    );

css

.bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('https://i.postimg.cc/JM8xhgHf/acils.png');
    background-color: black;
}


.welcome {
    height: 100%;
}

Upvotes: 1

Views: 39

Answers (1)

Aaron Li
Aaron Li

Reputation: 89

It seems like you are using bootstrap in React, since those classes look like Bootstrap classes. You need to define a container-fluid instead of container for the div container. container-fluid is what allows you to use up the whole width in Bootstrap

Upvotes: 2

Related Questions