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"
  }
}));

https://i.sstatic.net/xPslP.jpg

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

My JavaScript functions are not compliant with the HTML5 required tag

I am currently developing input fields using javascript/jQuery, but I am facing an issue with the required attribute not functioning as expected. The form keeps submitting without displaying any message about the unfilled input field. I also use Bootstrap ...

javascriptjqueryhtml

How can I modify the content within a scoped `<style>` tag in Vue?

Is there a way to dynamically change the contents of a <style> block in my Vue component using Vue variables? Many commonly suggested solutions involve inline styles or accessing the .style property with JavaScript. However, I am looking for a metho ...

cssvue.js

Is it possible to utilize an npm package in TypeScript without a d.ts definition file?

Is it possible to use an npm package in TypeScript and Node.js without a .d.ts definition file? If so, how can I make it work? Currently, my code looks like this and I'm getting an error that says "cannot find module 'node-rest-client'" bec ...

javascriptnode.jstypescriptnpm

Is there a way to achieve this without relying on Ext.getCmp in this particular code snippet?

I am currently using the following code to trigger a button click event once the window show event is called. It works perfectly fine, but I want to achieve the same functionality without using Ext.getCmp. Here is the line of code: Ext.getCmp('recen ...

javascriptextjsextjs4

What are the limitations of using a JS file within an Angular application?

I am struggling to integrate some js methods from a file into an angular application. Unfortunately, the browser is unable to recognize the js file. I have tried following the guidelines in this SO post, but the browser still cannot locate the file in the ...

javascriptnode.jsangulartypescriptecmascript-6

Unable to access image from JSON within Mobile Angular Ui utilizing Angular Js

Currently, I am able to retrieve various data from JSON such as Price and Display Order, but I am facing difficulty in fetching the image. HTML: <div ng-controller="chooseProductDescription"> <div ng-repeat="cat in productDescrip ...

javascriptjqueryangularjsjsonajax

What might be causing the sticky footer to malfunction on the Samsung Galaxy Note 2's default browser?

I recently implemented a sticky footer design on my website, following the guidance of Ben Frain's book "Responsive Web Design with HTML5 and CSS3" (second edition). While it works flawlessly on most modern browsers, I encountered an issue with the Sa ...

androidhtmlcss

In the v-bind:Style statement, check the condition

<div> <figure :style="{ 'background': 'url(' + item.main_featured + ') center no-repeat' }"> </div> I need the background style attribute to display a color if the URL fetched from the API is und ...

javascriptvue.jsvuejs2

Vanilla JS method for resetting Bootstrap 5 client-side validation when focused

I'm currently exploring Bootstrap 5's client-side validation feature. However, I've encountered a usability issue with the is-invalid class. After clicking the submit button, this class persists until the correct input is entered. I would li ...

javascripthtmlcsstwitter-bootstrap

Steps for modifying the CSS style of a div element following an onclick event:

<html> <head> <style type="text/css"> .step_box { border: 1.0px solid rgb(204, 204, 204); border-radius: 10.0px 10.0px 10.0px 10.0px; } .step_box:hover{ background: rgb(184, 225, 252); } .selected { background-color : #fff000; ...

javascriptjqueryhtmlcss

The data type 'Event' cannot be assigned to the data type 'string' in this context

Recently diving into Angular, I came across a stumbling block while working through the hero tutorial. The error message that popped up was: Type 'Event' is not assignable to type 'string' You can see the error replicated here. ...

javascripthtmlangulartypescript

Dynamically including and deleting classes upon clicking using React

Looking for a solution to handle a list of links. The goal is to add a class called "is-active" when a link is clicked, while also removing any existing "is-active" classes from other links. Only one link should have the "is-active" class at a time. This ...

javascriptreactjsbuttonclassname

What is the best way to utilize the properties obtained from a spread operator?

I am encountering a confusing issue in my code. I am passing an object as a prop and then taking it as a param. Passing props Taking it as a param Console logging the prop Initially, everything works as expected. However, when I use the spread operato ...

reactjs

The promise from the angular $http function is being duplicated

As I work on evaluating an expression within an if statement to return either true or false, I am utilizing $http promises. Despite the abundance of documentation available on this topic, I am confident in my ability to resolve any issues that may arise. ...

javascriptangularjsangular-promise

The child module invokes a function within the parent module and retrieves a result

Guardian XML <tr [onSumWeights]="sumWeights" > Algorithm sumWeights(): number { return // Calculate total value of all weights } Offspring @Input() onTotalWeights: () => number; canMakeChanges() { return this.onTota ...

javascriptangulartypescriptecmascript-next

unable to get highcharts to redraw and reflow properly

I am currently working on creating a dynamic page that can display between 1-4 graphs. These graphs need to be able to resize when added or removed from the page. However, I have encountered a major issue with resizing the graphs after resizing the contain ...

javascriptjqueryhtmlcsshighcharts

The divs contained are misaligned and not properly centered on the page

My container div contains 6 inner divs, but they are not properly centered on the page. Although the divs are equally spaced apart, they seem to be shifted to the left. I tried using 'justify-content: center' without success, and I suspect it mi ...

htmlcss

Can someone provide assistance on how to add an icon to a button?

Help needed with adding icons to buttons! I am new to coding and struggling with adding icons to each button. If any classes need to be changed, please let me know. I am currently learning HTML and CSS and could use some guidance. Thank you! Example: ...

htmlcss

Encountering an undefined value from state when implementing useEffect and useState

One issue I am facing is that the state of my projects sometimes returns as undefined. It's puzzling to me why this happens. In the useEffect hook, I have a function that fetches project data from an API call to the backend server. This should return ...

javascriptreactjsdomreact-hooksreact-redux

React exclusively deletes the final element from an array upon re-rendering

When an item is removed from an array in React, it seems to only remove the last item rendered in the array instead of the actual element that was deleted. Check out the code snippet below: <View style={[styles.container, this.props.style]}> ...

reactjsreact-native