Words fail to display

.sport
{
  content: url("../img/sport.png");
  background-color: rgba(0,0,0,1.0);
  top: 61px;
  height: 310px;
  width: 300px;
  position: absolute;
  margin: 0;
  left: 0;
  border-radius: 4px;
  overflow: hidden;
}

.sportsandactivis
{
  background-color: rgba(255,255,255,0.0);
  top: 142px;
  height: auto;
  width: auto;
  position: absolute;
  margin: 0;
  left: 48px;
  font-family: 'Montserrat',Helvetica,Arial,serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22.0px;
  color: rgba(255,255,255,1.0);
  text-align: center;
  line-height: 27.0px;
}
<div class="sport">
  <p class="sportsandactivis">Sports and Activis</p>
</div>

The picture is displaying correctly but the text within "sports and activities" does not appear, what could be causing this issue?

htmlcss

Answer №1

It seems that your text is not displaying because you have used content which completely overrides the content of your .sport element...

content is typically utilized to generate content on pseudo-elements like ::before and ::after, rather than altering the content of HTML elements.

Check here for more information about using CSS content property

You should consider using background-image instead:

.sport
{ /* Replaced "content" with "background-image", and included a functioning cat image */ 
  background-image: url("http://placekitten.com/300/310"); 
  background-color: rgba(0,0,0,1.0);
  top: 61px;
  height: 310px;
  width: 300px;
  position: absolute;
  margin: 0;
  left: 0;
  border-radius: 4px;
  overflow: hidden;
}

.sportsandactivis
{
  background-color: rgba(255,255,255,0.0);
  top: 142px;
  height: auto;
  width: auto;
  position: absolute;
  margin: 0;
  left: 48px;
  font-family: 'Montserrat',Helvetica,Arial,serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22.0px;
  color: rgba(255,255,255,1.0);
  text-align: center;
  line-height: 27.0px;
}
<div class="sport">
  <p class="sportsandactivis">Sports and Activis</p>
</div>

I hope this solution resolves your issue.

Answer №2

Modify the CSS within the .sport class to utilize a background image instead of content

.sport
{
  background-image: url("../img/sport.png");
  background-color: rgba(0,0,0,1.0);
  top: 61px;
  height: 310px;
  width: 300px;
  position: absolute;
  margin: 0;
  left: 0;
  border-radius: 4px;
  overflow: hidden;
}

.sportsandactivis
{
  background-color: rgba(255,255,255,0.0);
  top: 142px;
  height: auto;
  width: auto;
  position: absolute;
  margin: 0;
  left: 48px;
  font-family: 'Montserrat',Helvetica,Arial,serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22.0px;
  color: rgba(255,255,255,1.0);
  text-align: center;
  line-height: 27.0px;
}
<div class="sport">
  <p class="sportsandactivis">Sports and Activis</p>
</div>

Answer №3

Assign the .sport class a background-image. The current code will have the .sport class overlay the .sportandactivis class.

Consider using the following:

 width: 100%;
    background-image: url("../img/sport.png");
    background-position: 0%, 0%, 50%, 50%;
    background-size: auto, cover;

Then place the .sport class on top using either absolute or flex positioning like this:

.sport {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sport {
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 

}

Answer №4

You might want to consider updating your CSS or HTML, as there are two possible solutions for this issue.

Method 1:

In your CSS, try changing the content property to background-image.

To view the code, you can check it out here: https://jsfiddle.net/59ozuesp/

Method 2:

Alternatively, adjust your HTML by following this structure:

<div class="sport"></div>
<p class="sportsandactivis">Sports and Activis</p>

For a live demonstration, see the fiddle here: https://jsfiddle.net/5gwbax4d/

It's important to note that the content property is typically used with ::before and ::after pseudo-elements to add generated content. If you use the content property on its own, it will completely replace the existing content. Hope this clarifies things for you!

Answer №5

Include the following in your CSS code:


  background-image: url(https://placehold.it/150x150);
  background-repeat:no-repeat;
  background-size:cover;

Make sure to delete the content within the .sports class.

.sport {
  background-image: url(https://placehold.it/150x150);
  background-color: rgba(0, 0, 0, 1.0);
  background-repeat:no-repeat;
  background-size:cover;
  top: 61px;
  height: 310px;
  width: 300px;
  position: absolute;
  margin: 0;
  left: 0;
  border-radius: 4px;
  overflow: hidden;
}

.sportsandactivis {
  background-color: rgba(255, 255, 255, 0.0);
  top: 142px;
  height: auto;
  width: auto;
  position: absolute;
  margin: 0;
  left: 48px;
  font-family: 'Montserrat', Helvetica, Arial, serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22.0px;
  color: rgba(255, 255, 255, 1.0);
  text-align: center;
  line-height: 27.0px;
}
<div class="sport">
  <p class="sportsandactivis">Sports and Activis</p>
</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

I need the sidebar to be visible across all interfaces

https://i.stack.imgur.com/iEgAF.png I have developed a website for employee monitoring with six interfaces. The first interface is for sign-up, the second for logging in, the third for creating projects, the fourth for displaying projects, the fifth for c ...

cssvue.jsvuetify.js

Enhance Your List with Icon Decorations

Is it feasible to utilize a sprite image in place of the default bullet for an ul list? Is this achievable? ...

htmlcsshtml-lists

Sending HTML output to a PHP script

After setting up my HTML form with an action attribute pointing to "filename.php" and a method of post, I managed to generate JSON output by clicking the Submit button using the following code: $('#result').text(JSON.stringify($('form' ...

phphtmlajaxjson

Reset input fields upon jQuery removal

Currently, I am working on a form that includes a remove function. The function is functioning correctly, but I am facing an issue where I want the field values to be cleared when the remove function is triggered. This is necessary as I am sending input va ...

javascriptjqueryhtml

What are the steps to retrieve historical stock data for over one year using Yahoo Finance YQL query?

I am currently using a Tableau web connector to retrieve stock price data. Here is the source code: <html> <meta http-equiv="Cache-Control" content="no-store" /> <head> <title>Stock Quote Connector-Tutorial</title> <sc ...

javascripthtmltableau-apiyqlyahoo-finance

The color of the letters from the user textbox input changes every second

My task is to create a page where the user enters text into a textbox. When the user clicks the enter button, the text appears below the textbox and each letter changes color every second. I am struggling with referencing this jQuery function $(function() ...

javascripthtmljquery

Ways to choose a designated element without relying on ids or classes

I am looking to create an on-click function for each button, so I require a method to select each one individually without relying on IDs <div class="col"> <div> <b>Name:</b> <span ...

javascripthtmljquery

When using angular's ngHide directive on a button, it will still occupy space in the

At the bottom of this HTML file, there are 3 buttons displayed. The first image illustrates the layout of the 3 buttons. The second image demonstrates what happens when the middle button in the footer is commented out. The third image shows the situat ...

htmlcssangularjs

Using a Javascript while loop to iterate through an array and display the elements in the .innerHTML property

As a newcomer to Javascript, I am in the process of teaching myself. My current task is to develop a function that will display each element of the array AmericanCars with a space between them. I have successfully been able to show an individual element u ...

javascripthtmlwhile-loop

tainted ajax outcome

Check out this HTML page I am using: <html> <head> <title>AJAX Example</title> <meta http-equiv="Content-Type" content="text/html"; charset="iso-8859-1"> </head> <script language="JavaScript" src="ajaxlib.js"> ...

phphtmlajax

Preventing Content Jumping When Concealing Elements: Tips and Tricks

I've been working on a project at , where you can click on a small map to expand a larger map below it. However, I noticed that when you scroll down to the large map and then try to close it using the button at the bottom, the content on the page jum ...

javascriptjqueryhtmlcssangularjs

Creating your own unique CSS animation or transition timing function is a great way to add a

When it comes to CSS timing functions, they often appear to exist between two specific points: https://i.stack.imgur.com/qyvON.png Even with the option of using custom bezier curves, the curve created can only transition from one point to another. https ...

cssanimationcss-transitionscss-animationseasing-functions

The gradual disappearance and reappearance of a table row

I am struggling with making a row fade out when a specific select value is chosen (such as "termination"), and fade in when any other option is selected. The code works perfectly fine when the div ID is placed outside the table, but once I encapsulate it w ...

javascripthtmlcss

Using JSON within HTML: A guide to sanitizing stringified objects

Is there a way to improve the readability of a string that looks like an object but is actually just a string? It currently does not look very nice and easy to read. Using JSON.parse doesn't work because not every element in the string meets the requi ...

htmljson

Navigate through a filtered list of parent items with the use of cursor arrows in AngularJS

My form contains an input with a dropdown, where I display JSON data like this: { "title": "Parent #1", "child" : [ {"title": "Child ##1"}, {"title": "Child ##2"}, {"title": "Child ##3"}, {"title": "Child ##4"} ...

javascripthtmlangularjs

Can someone help me troubleshoot the issue with my submit button's onclick function?

I am currently working on a project where I have a content box enclosed in a div tag. Within this content box, there are paragraphs with unique IDs for individual styling rules. I have set margins, padding, and other styles accordingly. At the bottom of th ...

javascripthtmlcss

AngularJS - Oops! Looks like we encountered an error: [$injector:modulerr]

I have a client-server application and I am facing an issue with this error message: "Uncaught Error: [$injector:modulerr]". Despite searching for solutions, none of them seem to be fixing the problem. Here is my client-side code: angular.module('m ...

javascriptangularjshtmlsocket.io

The controller and node js request associated are invisible to my HTML page

Here is my HTML code. I have just created a unique controller for a specific part of the code. <div class="mdl-grid" ng-controller="ValueController"> <div class="mdl-card mdl-shadow--4dp mdl-cell--12-col"> <div class ...

javascripthtmlangularjsnode.js

Adding a background image in javascript using data from a MySQL database

My current tech stack includes CodeIgniter, vanilla JavaScript, AJAX, CSS, and MySQL. I am trying to figure out how to set the background of an image that is stored in a MySQL database. While the following code is error-free and working perfectly, my cha ...

javascriptphpcssajaxcodeigniter

The art of toggling div visibility with jQuery

When a button is clicked, I want to display a div named 'info'. <button>Toggle</button> <div id="toggle"> Test </div> I'm looking to implement a jQuery sliding feature to reveal the div, but I'm unsure of where ...

jquerycsshtml