Image showcasing the background

I'm facing an issue with adding a background image to my project

Even after trying to add it globally, the background image is not showing up on the Next.js index page.

import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function index() {
  return (
       <div className="myindex">
            dcmkl
       </div>
  )
}
This problem might be in the global.css file.

Can anyone help me troubleshoot this?

.myclass{
  height: 1000px;
  width: 1000px;
  background-image: url('./pexels-johannes-plenio-1103970.jpg');
}

Answer №1

If you're looking for the ideal spot to store local images, the public folder within your project's root directory (along with its subfolders) is the perfect choice. By importing an image from this location into your page or component using the following syntax:

import somePicture from '../public/some-path.jpg'

You can then add inline styles like so:

<div style={{
    backgroundImage: `url(${somePicture})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    width: '100%',
    height: '100%'
}}>
</div>

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

The <script> from source “http://127.0.0.1:8000/issues/app.bundle.js” could not be loaded successfully

I have a MERN project that utilizes "webpack": "^5.75.0" to proxy an express app with "express": "^4.18.2" When I navigate to a URL that goes a level deep with a '/', the index.html file struggles to locat ...

Embed HTML code into a React/Next.js website

I've been given the task of enhancing the UI/UX for an external service built on React (Next.js). The company has informed me that they only allow customization through a JavaScript text editor and injecting changes there. However, I'm having tro ...

The useRouter function was accessed, but the query object it received was found

Trying to understand routing in Next.JS, but struggling with accessing the query object. The file path is: ./src/pages/[test]/index.tsx import { useRouter } from 'next/router'; export default function Test() { const router = useRouter(); co ...

Modify the button text when it is hovered over

I am attempting to modify the text displayed on a button when hovering over it in a React component from Ant Design. However, I have not been successful so far. Button <div className={ status == "verified" ? `${styles.btn1} ${styles.btn1C ...

Managing Custom CSS Files in Sencha Touch 2 Production Build

Currently, I am in the process of working on a mobile website using Sencha Touch 2. To develop the production build, I utilized Sencha Cmd v3. Upon testing the production version, I noticed that although my custom CSS files are present in the folder struct ...

The command 'next' was not found in Reactjs as an internal or external command, operable program, or batch file

Whenever I attempt to execute 'yarn server' or 'yarn dev', an error message pops up stating 'next' is not recognized as an internal or external command, operable program or batch file. I've also experimented with running ...

Anticipated the line breaks to adhere to 'CRLF' but instead encountered 'LF' line break style

After cloning a website built on react js to my Windows PC, I encountered an error when running npm start: Expected linebreaks to be 'CRLF' but found 'LF' linebreak-style Upon researching solutions on Stack Overflow, I added the follo ...

Impossible to create margins on both the left and right side

Check out this cool pen: http://codepen.io/helloworld/pen/BcjCJ?editors=110 I'm facing an issue where I'm unable to create both left and right margins around my datagrid. Only the left margin seems to be possible. Any suggestions on how I can f ...

Making a POST request to a Next.js API route results in a 500 Internal Server Error being sent back

Check out the code in createComment.ts file, which serves as a Next.js api route: import type { NextApiRequest, NextApiResponse } from 'next' import sanityClient from "@sanity/client" const config = { dataset: process.env.NEXT_PUBLI ...

Exploring the world of CSS and designing layouts using multiple div elements

Upon reviewing this website, I must admit it is getting close to what I envision. However, being a perfectionist and new to HTML and CSS, I find myself struggling to achieve the desired outcome. The layout consists of two divs named topred and top yellow, ...

When Typescript Encounters Compilation Errors, Treat Them as Warnings Instead

After using npx create-react-app my-app --typescript to create my app, I want to set it up in a way that allows me to compile it even when there are typescript errors, so I can address them later. I couldn't find any compilerOptions for this. Is ther ...

Notification within the conditional statement in React JS

I am working on validating phone number input within a React JS component using an if/else statement. If the user enters letters instead of numbers, I want to display a message saying "please check phone number". While I have been able to create a function ...

The functionality of the React Material-UI menu anchor is disrupted when interacting with a react-window

In the project I am working on, I have encountered an issue with the Material-UI and react-window integration. Specifically, the material-ui menu component does not anchor properly when placed within a virtualized list created with react-window. Instead of ...

How to centrally align text in list items using Bootstrap 5

Incorporating Bootstrap 5 into my project, I am facing a challenge with vertically aligning text in an li element. Despite trying various techniques mentioned in the Bootstrap documentation for middle/center alignment, none of them seem to be effective. I ...

CSS: Targeting a particular instance of a specific element type within an HTML document

My goal is to target specific occurrences of a certain type of element in CSS for styling purposes. Consider the following example: <span>Some random stuff</span> <p>Occurrence 1 of p</p> <ul> <li>Random stuff</li&g ...

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

Alter the webpage's background color using setInterval while also implementing automatic scrolling based on active records

I've created a row of blinking div elements with a time interval, ensuring that only one div blinks at any given moment. To see it in action, please view the demo below: var arr = $(".boxes"); var current = 0; function bgChange() { if (a ...

Issues with vertical repeating in CSS Sprites

Hey there, I'm currently working on implementing css sprites in my web application. The challenge I'm facing is that I have organized the background of my website vertically within a sprite image. Now, one specific portion of the sprite needs to ...

What is the best way to incorporate custom Javascript into Next.js?

Having recently switched from React, I find myself feeling confused. Suppose in pages/index.js, I have a button with an onClick listener that should log "you clicked" in the console when clicked. How can I achieve this while ensuring that the page is stati ...

Adding a label to a border in Material-UI: A Step-by-Step Guide

Seeking assistance on creating a border around a list that mimics the appearance of a textfield border: View example image for reference. The image showcases a list with a similar border to a textfield, but lacks a label. How can I add a label and configu ...