Background image in full view

Can anyone help me create a full background on my page? I'm not sure if there's an issue with my code.

https://i.sstatic.net/vdOVs.png

This is 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%;
}

Answer №1

It appears that Bootstrap is being utilized within React, given the resemblance of those classes to Bootstrap ones. It's essential to specify a container-fluid rather than a container for the div container. Using container-fluid enables you to occupy the entire width in Bootstrap.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular directive for concealing the 'ancestor' of an element

I have created a code snippet that effectively hides the 'grandparent' element of any '404' images on my webpage. Here is the code: function hideGrandparent(image){ image.parentNode.parentNode.style.display = 'none'; } < ...

Maintain the markup created by jQuery inside the AJAX function called by setInterval

In the code snippet below, real-time markup is generated and automatically updates using the setInterval function. The markup includes buttons and hidden content within div elements. Each button reveals its corresponding div, but the div reverts to a hid ...

Initiating a click function for hyperlink navigation

Here is the HTML and JavaScript code that I am currently working with: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <a href="#f ...

Grab the SVG and resize it to a smaller scale

I have a small application built using Raphael.js that creates a node network with SVG and reorganizes it based on user selections. My goal is to capture the SVG image I've created and display it in a "mini-map" format at the bottom of the screen. Si ...

Enhancing the appearance of the active menu item with HTML/CSS/JS/PHP

Here's the HTML code I have: <ul class="navigation"> <li><a href="index.php">Home</a></li> <li><a href="index.php?content=about">About us</a></li> </ul> As you can see, the content of the " ...

Engage in a conversation with a specific individual on the internet using node.js

Looking to implement a chat feature with specific online users similar to Facebook or Gmail using node.js and socket.io. Can anyone assist me with this? Thanks in advance! Client.html <html> <head> <title>My Chat App</title> <d ...

Position an image on the top left corner of a div's border

I have a situation where I'm trying to overlay a small square transparent image on the top left border of a div that has a 1px border. The image is 48px by 48px in size and I want it to give the illusion that it's going underneath the top and lef ...

Bootstrap 4 Navigation Bar: Aligning dropdown menu to the right with overflow opening on the right side

Utilizing Bootstrap 4 for a simple navbar, I recently noticed that my right-aligned dropdown opens to the right, causing overflow and displaying the horizontal browser scrollbar. Here is the code for the navbar: <nav class="navbar navbar-expand-lg nav ...

What is the best way to distinguish elements in the same HTML using Angular Material?

Currently, I am working on a project using Angular material, where I have a component.html file that defines a form and a table with data. In the first image of my project, you can see the tab title, a form to add new records, and the table displaying exi ...

How to locate the position of a specific word on a webpage using jQuery

In my div, I am struggling to search like an editor. Despite multiple attempts, I have not found a solution yet. Can someone please advise me on how to resolve this issue? <div id="content"> <p> Lorem Ipsum is simply dumm ...

Troubleshooting: Unable to Remove Files in PhoneGap

I've been working on a basic app that heavily utilizes PhoneGap to test its capabilities. Currently, I'm trying to delete a file that has been downloaded within the app, but I'm encountering some issues. The majority of the code I've im ...

Is it possible to utilize a CSV file to dictate which images should be utilized on my website as a guide?

I'm currently working on my website's gallery and have a collection of over 60 images. I'm exploring ways to streamline the process of displaying these images by having the website read their names from a CSV file instead of manually coding ...

Changing the direction to reverse column will cause the navigation component to be hidden

Issue: The <Navigation/> components disappear when using flex-direction: column-reverse. However, if I switch to flex-direction: column, the component appears at the top of the screen and is visible. My objective is to display my <Navigation/> ...

The minmax() function in a responsive grid layout does not function properly when incorporating grid areas

My Vision for the Layout I am striving to create a dynamic grid structure with three columns and two rows, where the third column spans both rows and features an image. This layout should adjust itself based on the device screen size: Specifically, I wou ...

The header text appears misaligned and is not centered as intended

I'm a beginner in react native and I'm currently working on navigation. The issue I'm facing is that the header text is not aligning to the center. I've attempted the following: static navigationOptions = { title: "Help", alignSelf: &a ...

Stop the div from expanding because of oversize text in Bootstrap

I have the following HTML source code for a Bootstrap card: <div class="card shadow-none card-fluid mb-3 mb-md-5"> <div class="row"> <div class="col-md-3 col-lg-3 mb-3 mb-sm-0"> <img class="img-fluid rounded" ...

The .remove() method is ineffective when used within an Ajax success function

I am facing an issue with removing HTML divs generated using jinja2 as shown below: {% for student in students %} <div class="item" id="{{ student.id }}_div"> <div class="right floated content"> <div class="negative ui button compa ...

Convert the easeInExpo function from jQuery easing to vanilla JavaScript and CSS

Currently, I am in the process of converting a piece of code from jQuery to plain JavaScript and CSS. The specific code snippet I am focusing on involves creating easing functions without relying on jQuery. const customEasing = { easeInExpo: function ( ...

Dynamic sizing for sublists

I have come across a nested list structure that looks like this: <ul id="nav"> <li id="" class=""> <a href="http://site.com/wedding.html" class="">Wedding</a> <div class="flyoutWrapper" style="display:block;"> ...

Guide for adding a button in HTML table with event creation using ASP.NET and C# language

I am trying to dynamically add a button in each row of an HTML table column using C#. The button is being created for each row, but the click event is not being triggered. Here is the code snippet from the code behind and ASP.NET: public string ge ...