What is the best way to overlay text onto a background image using Material UI's Card and CardMedia components?

Using the card component, I have successfully added a background image. However, I am facing difficulty in figuring out how to overlay text on top of this image. If anyone has suggestions or alternative methods, please feel free to share!

<Card>
    <CardMedia
        component="img"
        alt={header.bg_img}
        src={process.env.API_URL + header.bg_img.url}
        title="Background Image"
      />
      <CardContent>
           <h2 className={classes.h2}>{header.title}</h2>
           <p className={classes.paragraph}>{header.small_description}</p>
      </CardContent>
</Card>
javascripthtmlcssreactjsmaterial-ui

Answer №1

<Card className={classes.root}>
  <CardMedia
    component="img"
    alt="Contemplative Reptile"
    height="200"
    image={Header}
    title="Contemplative Reptile"
  />
  <Typography
    gutterBottom
    variant="h1"
    component="h1"
    className={classes.font}
  >
    Weather
  </Typography>
</Card>

const useStyles = makeStyles(theme => ({
  root: {
    position: "relative"
  },
  font: {
    position: "absolute",
    top: "20%",
    width: "100%",
    textAlign: "center",
    color: "black",
    backgroundColor: "none",
    fontFamily: "Comic Sans MS"
  }
}));

Explore it online:

https://codesandbox.io/s/affectionate-euler-0rwi7?fontsize=14&hidenavigation=1&theme=dark

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

Is there a way to run /_next/static/xxx.js using a script tag?

I have customized my next.config file (webpack) to generate a static JavaScript file (.next/static/loader.js). The original loader.js is an Immediately Invoked Function Expression (IIFE): (function stickerLoader(){ alert('Hello'); // ... so ...

javascriptnext.js

Make sure that the parent element is only visible once all of its child elements have

As a newcomer to the world of react, I am facing some challenges. I have created a form in react which includes a dropdown. To ensure reusability across multiple pages, I decided to turn this dropdown into a component that is responsible for fetching all n ...

javascriptreactjs

Providing Arguments to a Named Function Using Dependency Injection

I am currently working on an Angular app where I am passing a named function into a controller. The issue arises when I try to inject a provider into that controller for use, as I receive a TypeError: object is not a function in the console. My question i ...

javascriptangularjsdependency-injection

Having issues with Angular http.post not sending data when using subscribe

I'm currently facing an issue with sending data to my API using post.subscribe. Despite the fact that no errors are being thrown, the data is not being sent successfully. It's important to note that the API itself is functioning perfectly. Belo ...

javascriptangularhttpobservable

Selenium in C#: Timeout issue with SendKeys and Error thrown by JS Executor

Attempting to insert the large amount of data into the "Textarea1" control, I have tried two different methods. The first method successfully inserts the data but occasionally throws a timeout error, while the second method results in a JavaScript error. A ...

javascriptc#seleniumselenium-webdriver

How can I trigger a JavaScript function when the ENTER key is pressed?

I'm attempting to use JavaScript to scroll down a page. The code below works perfectly when I use javascript:pageScroll() in a link or button: <SCRIPT LANGUAGE="Javascript"> function pageScroll() { window.scrollBy(0,50); // hor ...

javascripthtml

My custom CSS being overridden by Bootstrap styles

I'm currently working with Twitter Bootstrap's CSS, but it seems to be overriding some of my custom classes. Initially, I placed it before my own CSS in the HTML header (I am using jade and stylus template engines): doctype html html head ...

htmlcsstwitter-bootstrappugstylus

Is there a way to shift this div to the bottom and incorporate some quirky pop-up squares?

I am struggling to figure out how to move this div to the bottom. Additionally, I want to create temporary pop-up squares (simple divs) in random directions that will disappear after 50ms. My attempt to float this box to the bottom did not yield the desir ...

jquerycss

Tips for avoiding Netlify's error treatment of warnings due to process.env.CI being set to true

Recently, I encountered an issue with deploying new projects on Netlify. After reviewing the logs, I noticed a message that had never appeared during previous successful deployments: The build failed while treating warnings as errors due to process.env.CI ...

javascriptnpmnetlify

Issues with looping in Internet Explorer 8

Hey, I'm having an issue with this JavaScript function: function test(){ var count = 0; var date1 = $('#alternatestartdate').val(); var date2 = $('#alternateenddate').val(); ...

javascriptjquery

Tips on how to stop label text from wrapping onto a new line and only show one line

Working with asp.net mvc, I am encountering an issue where the label text is displaying on two lines instead of one. The expected behavior is for it to appear on a single line. I need the label text to display without wrapping to a new line. For example, ...

htmljquerycssasp.net-mvcasp.net-mvc-4

Is there a way to implement the border-box property for Internet Explorer versions 6 and

Similar Question: How to implement box-sizing in IE7 Anyone know a method or workaround to apply box-sizing:border-box; in IE6 and IE7? Even just for IE7? ...

css

Avoid unnecessary re-renders in ReactJS Material UI tabs when pressing the "Enter

I've created a user interface with tabs using material-ui in reactJS. The issue I'm facing is that every time a tab is selected, the content under that tab reloads, causing performance problems because there's an iFrame displayed in one of t ...

javascriptreactjsmaterial-ui

What is the best way to position a Button on the far right of an MUI AppBar?

I'm struggling to grasp the concept of aligning items in MUI. Here is my code snippet: class SignUpForm extends React.Component { render() { return ( <Button sx={{ justifyContent: "flex-end" }} colo ...

cssreactjsmaterial-ui

The website is not optimized for mobile viewing

I have recently made an existing website responsive using Twitter Bootstrap. Everything seemed to work fine when I tested it by resizing the browser window, as it perfectly fit in the viewport. However, upon checking the site on mobile and tablet devices, ...

csstwitter-bootstrapresponsive-design

What is the best way to incorporate my Switch component into my Table component as a distinct column, while also maintaining separate states for each component?

My journey into learning React.js has been exciting so far. However, I am facing some confusion when it comes to stateful components. Currently, I am utilizing Bootstrap tables for creating a table and successfully fetching data using GET requests. Additio ...

javascriptreactjsreduxbootstrap-4material-ui

Limited functionality: MVC 5, Ajax, and Jquery script runs once

<script> $(function () { var ajaxSubmit = function () { var $form = $(this); var settings = { data: $(this).serialize(), url: $(this).attr("action"), type: $(this).attr("method") }; ...

javascriptjqueryajaxasp.net-mvchtml

What is the method for breaking down a React useState hook into separate variables within a namespace?

Personally, I like to group React props into namespaces for better organization. When using the useState hook, I follow this approach. function MyComponent() { const [todoCount, setTodoCount] = useState(100); const [doneCount, setDoneCount] = useSta ...

javascriptreactjs

Navigating Between Pages with Parameters in Ionic 2 (starter app)

I have an Ionic 2 project with a blank template containing a page that displays a list. Upon clicking on an item in the list, the user should be able to view more details about that specific item. Below are the files related to the list: list.html: <i ...

javascriptangulartypescriptionic2ionic3

Template does not reflect changes made to filters in real-time

I've been working on filtering my "PriceList" collection and sorting is functioning perfectly. However, I'm experiencing some issues with implementing filters and search functionality. When I click on custom filter buttons, the template doesn&apo ...

javascriptnode.jsmeteormeteorite