CODEWITHSUNDEEP
javascriptreactjsimagetext
Rayman244
Rayman244

Reputation: 15

Putting text on top of image not working?

I am trying to overlay text onto the image and cannot figure out how too. This may be an easy question so if you can go into some detail on how it is done that would be much appreciated.

import React from "react";
import { Typography } from "@material-ui/core";
import topImg from "/Users/rayhewitt/Desktop/react-portfolio/src/imgs/topImg.jpeg";
import useStyles from "./HeadStyles";

const Head = () => {
  const classes = useStyles();
  return (
    <div className={classes.top}>
      <img className={classes.image} src={topImg} alt="codingPic" />
      <Typography className={classes.intro} align="center">
        Hey, im Ray Hewitt a UI/UX frontend developer
      </Typography>
    </div>
  );
};

export default Head;
import { makeStyles } from "@material-ui/core";

export default makeStyles({
  top: {
backgroundColor: "rgba(8,89,145,255)",
height: "5000px",
  },
  image: {
paddingTop: "48px",
width: "100%",
zIndex: "100",
  },
  intro: {
justifyContent: "center",
position: "absolute",
zIndex: "101",
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 0

Views: 61

Answers (1)

user16435030
user16435030

Reputation:

Quickly looking at your code it seems like you're almost there. I think the only thing missing is a position: relative on your parent container and a position on the text.

.top {
  position: relative;
}

.text {
  position: absolute;
  top: 0; // or left/right/bottom
}

That should do it.

What's important to understand here is that if you position: absolute an element then it will stick to whatever parent throughout the tree is position: relative or it will stick to body if there isn't any. Marking the parent container as position: relative will have the text stick to that parent, then you can control the positioning with top/bottom/left/right.

Side note, I'm not sure it makes sense to use justify-content if the text isn't display: flex.

Upvotes: 1

Related Questions