HTML CSS how do I remove the background color of text-CodePudding

An issue I'm amazed I couldn't solve on my own. I can not seem to remove the standard white background from any text added to my page. I have tried being broad and making the body and p tags transparent as well as being specific with classes. No luck.

The white text background at the bottom

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.backgroundImage {
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(desk1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
}

body {
  background: transparent;
  background-color: transparent;
}

p {
  background: transparent;
  background-color: transparent;
}

.divText {
  background: transparent;
  background-color: transparent;
}

.text1 {
  font-size: 40px;
  background: transparent;
  background-color: transparent;
}

<div ></div>
<div >
  <p >
    many words are written here to take up lots and lots of space. i do this to test the scrolling of my background image thank you very very much
  </p>
</div>

CodePudding user response：

If what you really want is to put the writing on top of the image, you can try this structure in your HTML, because there is actually no background there, it's just situated below the image. To position the text well over the image, you can try using flex-box.

*{
margin: 0;
padding: 0;
font-family: sans-serif;}

.backgroundImage{
background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url(desk1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;}

body {
background: transparent;
background-color: transparent;
}

.text1{
font-size: 40px;
}

<html>
<head>
    <title>This is a title</title>
    <link rel="stylesheet" href="luxStyle1.css">

</head>
<body>
    <div >
      <p >
              many words are written here to take up lots and lots of space. i do this to test the scrolling of my background image thank you very very much
      </p>
    </div>
</body>

CodePudding user response：

Source of this problem comes from the div with backgroundImage class, it is placed before the divText, and there are a few solutions that I can thing of right now:

Delete background image and place css code of it to .divText so the divText has that background (this is what my snippet shows, i also deleted extra lines that specify transparency, you don't need to necessarily delete them, I just wanted to get rid of it since there is no use for it anymore)
Same as number one but place the .backgroundImage class data to body so the whole page has the same background, No.1 solution affects the background of divText
Use position absolute to put .divText to inside of the .backgroundImage

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.backgroundImage {
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(desk1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
}

.divText {
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(desk1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.text1 {
  font-size: 40px;
}

<div >
  <p >
    many words are written here to take up lots and lots of space. i do this to test the scrolling of my background image thank you very very much
  </p>
</div>

CodePudding user response：

The background is transparent already because the body default background color is white, so to fix that just put the text inside the div with the backgound image like this:

<div >
    <div >
      <p >
        many words are written here to take up lots and lots of space. i do this to test the scrolling of my background image thank you very very much
      </p>
    </div>
</div>