How can I eliminate the text background color using HTML and CSS?

I've hit a roadblock trying to remove the default white background from text on my page. I've tried various approaches, such as making the body and p tags transparent and using specific classes, but I just can't seem to get rid of it.

Link to image with white text background

* {
  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 class="backgroundImage"></div>
<div class="divText">
  <p class="text1">
    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>

htmlcssbackground

Answer №1

If you're looking to overlay text on top of an image, you can utilize this HTML structure. There's no actual background involved here, just the text positioned above the image. To achieve proper placement of the text over the image, consider implementing 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 class="backgroundImage">
      <p class="text1">
              A lot of content goes here to fill up space and test the scrolling effect of the background image. Thank you very much for your assistance.
      </p>
    </div>
</body>

Answer №2

One issue stems from the div with the backgroundImage class being positioned before the divText. Several solutions can be considered:

  1. Delete the background image and incorporate its CSS code into .divText so that it inherits the background (as demonstrated in my snippet, where I also removed unnecessary lines specifying transparency)
  2. A variation of the first option involves moving the .backgroundImage class data to the body tag for a consistent page-wide background, although this will affect only the background of divText
  3. Utilize position absolute to nest .divText inside .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 class="divText">
  <p class="text1">
    A substantial amount of text is written here to test the scrolling functionality of the background image. Thank you very much.
  </p>
</div>

Answer №3

To address the issue of having a transparent background, simply enclose the text within a div that has a specified background image. Here's an example:

<div class="backgroundImage">
    <div class="divText">
      <p class="text1">
        There are numerous words written here to fill up a significant amount of space. I am doing this experiment to evaluate how well my background image scrolls. Thank you for your cooperation.
      </p>
    </div>
</div>

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

Keep the button in a single color unless it is being hovered over

Is there a way to create a button that changes color on hover, then reverts back to its original color after it's clicked? I'm facing an issue where my button initially has a red gradient, then changes color when hovered over, but turns white on ...

jqueryhtmlcsshoverfocus

Steps to access the file path of a swf document stored in a MYSQL database and display it on a web page

There seems to be an issue with my code below. The database I am working with is named nisreen, and the table within it is called ana. My goal is to retrieve the path of a SWF file from the database and display it on a web page. <!DOCTYPE html PUBLIC ...

phpmysqlhtml

The footer seems to be malfunctioning

Let's start with the code: CSS: *{ margin:0; padding:0; } body,html{ height:100%; } body{ background:url('../images/bg.png'); background-position:center; background-repeat:no-repeat; background-attachment:fixed; height:100%; ...

htmlcss

Conceal the choice if its value matches that of another option

My goal is to create a code that will hide an <option> if its value matches the value of the first option (which is retrieved dynamically with PHP). Here's the initial code snippet: <select onChange="this.form.submit()" name="cart[<?php e ...

javascriptjqueryhtmllistboxhtml-select

Which is more advantageous for creating a new block in Bootstrap 4 – using ".row" or ".col-12"? And what is the reasoning behind your choice?

Here is a simple example to demonstrate. <div class="container"> <div class="row"> <form class="col-12 form-group"> // some code </form> <div class="col-12"> // some text for description </d ...

htmlcssbootstrap-4

Ways to display a specific element by its id while concealing others

I have a collection of items in a list, each with unique ids: <ul> <li id="item1">Item 1</li> <li id="item2">Item 2</li> <li id="item3">Item 3</li> </ul> <div class="item1">This is Item 1.</div> ...

javascriptjqueryhtmlcsshide

Making an entire webpage background clickable using just HTML and CSS

Is there a way to make the entire background of the page clickable using just HTML and CSS? <div style="position: fixed; top:0px; left:0px; z-index: -1; background: url() center center no-repeat; width: 100%; height:100%;"> <a href='http ...

htmlcss

Tips for manipulating the DOM: Pushing existing elements when new ones are dynamically created with JavaScript

I have a pre-existing DOM element (let's say a div) and I am using JavaScript, specifically React, to create a new element - another div which serves as a sidebar. The goal is for the sidebar to seamlessly shift the previous element without overlappin ...

javascripthtmlcssreactjs

A completely css-based interpretation of google images

I am in the process of trying to recreate the layout found in Google Photos and stumbled upon this intriguing page https://github.com/xieranmaya/blog/issues/6 . I am particularly interested in the final result of the project, which can be viewed here: . U ...

htmlcssflexbox

Arranging objects in an array using EJS

I'm struggling to sort an array of objects in EJS that is sent from the server in Node.js. The array contains various lesson details. Here's the joinLecture.js file where the array is passed to EJS: res.render("lectureSearch", {searchDa ...

javascripthtmlarraysobjectejs

Insert a picture within the text input field

I'm facing a specific scenario where I need to add text followed by an image, then more text followed by another image and so on. Please see the input text with values in the image below. Can someone guide me on how to accomplish this with jQuery and ...

javascriptjqueryhtmlcss

What steps do I need to take to adjust my code so that the div function is hidden upon the second click

, I have provided my code as a beginner who is learning on the go. The code showcases a function that triggers on click and loads content accordingly. However, the desired functionality includes hiding the content on the second click and maintaining an "a ...

javascripthtmljquerycss

Utilize jQuery to apply a border and background color to a table row when hovering over it

Is there a way to change the border of a table row along with its background color when the mouse hovers over it? Currently, I can only modify the background color using the following code: $(document).ready(function() { $(function() { $(&apos ...

jquerycss

How Can I Move My Toggle Button to the Left of My Brand Image/Name in Bootstrap 4.5.0?

My issue is with the toggle button placement, as it always appears slightly to the right of my brand image. The same issue occurs when using a brand name. This is the current layout: https://i.sstatic.net/zdvN0.jpg I would like the toggle to be positione ...

csstwitter-bootstrapbootstrap-4ruby-on-rails-5navbar

I am encountering an issue where the function send_mail is receiving multiple values for the argument fail_silently

https://i.sstatic.net/QUt2A.png My small program encountered an error when attempting to email information from a form. Here's the type of error I got: I'm writing a simple little program ... when I'm trying to email this info. from that fo ...

htmldjangoformstemplates

What is the process for calculating the total sum of input values utilizing JavaScript?

My JavaScript skills are not perfect, and I'm struggling to calculate the total sum of values in the amount input boxes without refreshing the page. Can someone assist me with this challenge? Thank you. function Calculat ...

javascripthtml

Save JSON data in an HTML document or vice versa

Hey there, the title of this post might seem a bit unclear but I couldn't think of another way to phrase it. So here's the dilemma: I have some data that is JSON encoded and stored in a .json file: {"foo":"bar", "bar":"foo", "far":"boo"} Additi ...

javascriptjqueryjsonhtmlelectron

Encountering a 404 error while trying to use the autolinker

I have been struggling with this issue for the past day and can't seem to solve it on my own. Essentially, I am attempting to use Autolinker.js to automatically convert URLs into clickable hyperlinks in my chat application. However, every time I try ...

javascripthtmlnode.js

Employing foreach loop for generating hyperlinks from an array

I am seeking assistance in generating links using a PHP foreach loop that cycles through an array containing the names of navbar links for a website. Currently, my loop is creating links that lead to a 404 error page and display unwanted HTML tags in the ...

phphtmlarraysnavbar

find the intersection point of two elements

Is it possible to identify the exact point where two elements overlap? Take a look at the code snippet below that demonstrates what I mean: <html> <head> <style> body { height: 100%; margin: 0; padding: 0; ...

javascripthtmlcss