Is there a way to use use text as the background with CSS?

chustar_24391 0
Viewed 211651

I would like to use dynamic text as background of certain elements in my tag. Because of this, I can use images (dynamic text). How do I do it with just CSS or JavaScript?

background css html
11 Answers

You can have an absolutely positioned element inside of your relative positioned element:

#container {
   position: relative;
}

#background {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
}
<div id="container">
    <div id="background">
    Text to have as background
    </div>
    Normal contents
</div>

Here's an example of it.

Paolo_Bergantino_164170

It may be possible (but very hackish) with only CSS using the :before or :after pseudo elements:

.bgtext {
  position: relative;
}

.bgtext:after {
  content: "Background text";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<div class="bgtext">
  Foreground text
</div>

This seems to work, but you'll probably need to tweak it a little. Also note it won't work in IE6 because it doesn't support :after.

DisgruntledGoat_379470

Using pure CSS:

(But use this in rare occasions, because HTML method is PREFERRED WAY).

.container{
 position:relative;
}
.container::before{ 
 content:"";
 width: 100%; height: 100%; position: absolute; background: black; opacity: 0.3; z-index: 1;  top: 0;   left: 0;
 background: black;
}
.container::after{ 
 content: "Your Text"; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; overflow: hidden; font-size: 2em; color: red;    text-align: center; text-shadow: 0px 0px 5px black; background: #0a0a0a8c; padding: 5px;
 animation-name: blinking;
 animation-duration: 1s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}
@keyframes blinking {
 0% {opacity: 0;}
 100% {opacity: 1;}
}
<div class="container">here is main content, text , <br/> images and other page details</div>

user_23773430

I hope this might help you

<!DOCTYPE html>
<html>
<head>
<style>

 :root:after { 
         
            content: "Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark   Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark "; 
            position: fixed; 
            transform: rotate(300deg); 
            -webkit-transform: rotate(300deg); 
            color: rgb(187, 182, 182); 
            top:0;                     
            z-index: -1; 
        } 
</style>
</head>
<body>
<p>hey my name is JHM</p>
</body>
</html>

user_85391040

You could make the element containing the bg text have a lower stacking order ( z-index, position ) and possibly even set opacity. So the element you need on top would need a higher stacking order ( z-index:5; position:relative; for ex ) and the element behind would need something lower ( default or just a lower z-index like 3 and position:relative; ).

user_1451900

Ran across this post looking for an idea how to add text to the background of a div container and this was my solution I came up with using two flex containers.

.foreground {
  display: flex;
  background-color: #f7fcfc;
  justify-content: center;
  align-content: center;
  border-radius: 3px;
  border: 2px solid #86cdb6;
  margin: 1em;
  width: 100px;
  height: 100px;
}

.foreground p {
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 900;
  color: #86cdb6;
  margin: auto;
  text-align: center;
  z-index: 2;
}

.background {
  position: absolute;
  display: flex;
  align-content: center;
  justify-content: center;
  width: inherit;
  height: inherit;
  z-index: 1;
  overflow: hidden;
}

.background p {
  font-family: sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #ddf1ef;
  text-align: center;
  margin: auto;
}
<div class="foreground">
  <div class="background">
    <p>Background
      <br> Background
      <br> Background
      <br> Background
    </p>
  </div>
  <p>Foreground</p>
</div>

user_182713110

A simple solution:

    background-text{
        font-size:30px;
        font-weight:900;
        color:#f1f1f1;
        position:absolute;
        z-index:-1;
    }
<div id="container">
<background-text> This is background</background-text>
This if foreground text
</div>

You do not really need to set "position:relative" for the container, except you need to setup relative position for background.

user_159145530

I have used this code.

   const StepIcon = ({ label, description }) => (
    <div>
        <span className='step-icon' style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <CircleOutlinedIcon />
            <div style={{ position: 'absolute', fontSize: 10 }}>{label}</div>
        </span>
        <div>{description}</div>
    </div>
);

            <Stepper activeStep={0} alternativeLabel>
                {stepperSteps.map((label, index) => (
                    <Step key={label}
                        sx={{
                            '& .MuiStepLabel-root .MuiSvgIcon-root': {
                                color: theme.palette.primary.main, // circle color (ACTIVE)
                                borderWidth: 1
                            }
                        }}
                    >
                        <StepButton icon={<StepIcon label={index + 1} description={label} />} />
                    </Step>
                ))}
            </Stepper>
user_23935730
Related