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

Combining several btn-group and btn-group-vertical elements within each other

I am looking to create a button grid resembling a numpad for my project. I am utilizing angular and bootstrap 5 and thought of using btn-group and btn-group-vertical for this purpose. While this setup would work for a regular button grid, I need to have t ...

htmlcsstwitter-bootstrapbootstrap-5

Tracking the email field in a React form with refs

Hey there! I'm a music engineer working on my own personal website using React. I'm currently facing an issue with creating a contact form that allows users to input a subject in a text field, a message in a textarea, and then click a "reach out" ...

javascripthtmlreactjsjsx

Utilizing jQuery and CSS to make an entire div clickable, and activate an 'a' tag hover state upon hovering

Looking to create a clickable link for the .wrapper div that directs users to the location of a.icon. Want the .wrapper div to activate the a.icon:hover state when hovered over, not just when hovering over the icon itself. Any assistance would be highly a ...

javascriptjquerycss

Design a unique border for a div element that extends a top-border all the way through the header and a bottom-border that

I am trying to achieve the design displayed in this mockup: Here is my current progress: https://codepen.io/raney24/pen/VOmjBY .header-border { width: 100%; margin-bottom: 10px; border-left: red solid 1px; border-right: red solid 1px; border- ...

htmlcssborder

Dynamic div with height controlled by the content of the background image

I'm trying to figure out how to make a div with a background image of 100% width always maintain the aspect ratio of the image for its height. Is there a way to achieve this? In simpler terms, when I resize the page, I want the div to scale down whil ...

htmlcss

React does not support having two :focus selectors on a single JSX element

I'm working with a React script that includes a specific element. I want to apply more than one :focus-within selector in CSS, but for some reason only the dropdown selector is being expressed when I focus on the element. Here's the code: React J ...

htmlcssreactjsflexboxfocus

Graphic background integrated into form input

Is it advisable to create colored shapes in Illustrator, export them as SVG files, and then embed input tags or textareas within these shapes to allow users to enter text? Are there alternative methods we could use for this functionality? ...

htmlcsssvg

Loading times for the Polymer Project are sluggish

The website design is very appealing. However, it seems to be loading quite slowly even on Google's servers. Is there a way to speed up the initial load time of the Polymer site? Additionally, there are numerous HTTP requests being made; is there a wa ...

javascripthtmlcsspolymerstyling

I am experiencing issues with my three.js script not functioning properly within the context of a

I have been working on implementing a raycaster function in my project that only activates when an entity is visible. To achieve this, I was advised to create a custom script for better control. I have set up all entities and their child entities to be in ...

javascripthtmlthree.jsaframe

SVG Opacity Transitions seem to ignore the constraints of CSS rules and bounce chaotically beyond their designated boundaries

I'm currently working on implementing a hover effect for an SVG rect embedded in HTML. The transition I've set up is not smooth, and the opacity values seem to be inconsistent during the animation. My browser of choice is Firefox. The rect I&apo ...

htmlcsssvgcss-transitions

Deleting a particular tag with regular expressions: a step-by-step guide

I'm attempting to remove a ul tag along with any nested tags inside it. <ul class="related"> <li><a href="/related-1.html" target="_blank">Related article</a></li> <li><a href="/related-2.html" target="_blank"&g ...

phphtmlregex

When a checkbox is clicked, how can we use Angular 4 to automatically mark all preceding checkboxes as checked?

I have a series of checkboxes with labels such as (Beginner, Intermediate, Advanced, Expert, etc.). When I click on any checkbox, I want all previous checkboxes to be checked. For example: If I click on Advanced, only the preceding checkboxes should get ...

htmlangulartypescriptcheckbox

Mastering the CSS Art of Working with Sprite Images and Their Positioning

I am currently working on an educational project as a front-end developer, where I aim to clone the Google homepage. To achieve this, I am utilizing Google's own sprite and here is the image of the sprite that I am using. https://i.stack.imgur.com/YT ...

htmlcsssasssprite

Dynamic sliding effect in CSS for seamless showing and hiding of div elements

I stumbled upon a fantastic solution in these forums How to create sliding DIV on click? However, what I really wanted was for the content to fade in and out with just a click of a button. Here is the code snippet I am currently working with: <html> ...

javascripthtmlcss

Transition effects in CSS when hovering

I've run into an issue where I'm attempting to create a hover transition effect on a div when the mouse hovers over it. The idea is that hovering over the main div should trigger another div to appear above it, with a smooth transitioning effect. ...

htmlcss

Is there a way to utilize local resources in case CDNs are unable to load properly?

Encountering an issue with Bootstrap and jQuery loading from CDN, sometimes failing to import from the CDN source. For instance: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYii ...

javascripthtml

Positioning the jQuery mobile navBar to be fixed on iOS 4 devices

Currently working on a mobile app with jquery using iOS4 and iOS5 compatibility as the final hurdle. While fixing the navigation bar is simple on iOS5 with position:fixed, it's not as straightforward on iOS4! I've experimented with various soluti ...

jquerycssxcodehtmljquery-mobile

CSS problem: HTML element moving to the right upon clicking

Currently, I am utilizing a jQuery popup to present additional information to users. The setup involves having a link on the page that triggers the popup to appear from the top. The popup script being used is sourced from CodePen. However, an issue arises ...

jqueryhtmlcssmagnific-popup

Hero Sticky Transition with 100vhDivElement

My code is giving me some trouble. I want the div with text to stay at the bottom of the hero section with a transparent background. When that div reaches the top, it should stick with a black background. The issue is that I have set it in the javascript v ...

javascriptcss

retrieve the month and year data from the input date

I encountered a situation where I'm working with the following unique HTML code: <input type="date" id="myDate"/> <button type="button" class="btn btn-secondary" id="clickMe">MyButton</ ...

javascripthtml