HTML & CSS: Modify background rectangle behind text to limit its size within the webpage dimensions

I'm experiencing a unique issue with the current code present in my HTML index file. 

<div class="titleMessage">

    <div class="heading">

        <p class="main">NAME HERE</p>
        <p class="sub">Software Engineer</p>

    </div>
</div>

Here is the CSS code that I have written: 

.titleMessage {
    position: absolute;
    width: 100%;
    height: 250px;
    top: 50%;
    z-index: 5;
    text-align: center;
    margin-top: -125px;
}


.titleMessage .heading p{
    color:  #080808;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.4);
    font-weight: 100;
    letter-spacing: 7px;
    background: #F5F5F5; 
    background-size: contain;
}

.titleMessage .heading .main{
    font-size: 50px; 
}


.titleMessage .heading .sub{
    font-size: 23px; 
}

The issue arises on the webpage where the background color of the text expands across the entire screen instead of being contained within the text boundaries.

My goal is to restrict the background rectangle behind the text (with the color #F5F5F5) to be slightly larger than the actual text size.

How can this adjustment be made?

htmlcsstextbackgroundelement

Answer №1

To create a stylish background effect for specific texts, enclose them within span tags and apply the background property only to that span. By doing this, you can ensure that the background doesn't extend across the full width of the element. Furthermore, by adding some padding, you gain more control over the extension of the background:

.titleMessage {
    position: absolute;
    width: 100%;
    height: 250px;
    top: 50%;
    z-index: 5;
    text-align: center;
    margin-top: -125px;
}


.titleMessage .heading p{
    color:  #080808;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.4);
    font-weight: 100;
    letter-spacing: 7px;
}
.titleMessage .heading p span{
    background: #F5F5F5; 
    padding: 6px 12px 0;
}
.titleMessage .heading .main{
    font-size: 50px; 
}


.titleMessage .heading .sub{
    font-size: 23px; 
}
<div class="titleMessage">

    <div class="heading">

        <p class="main"><span>NAME HERE</span></p>
        <p class="sub"><span>Software Engineer</span></p>

    </div>
</div>

Answer №2

I have adjusted some CSS for you:

.titleMessage {
  margin-top:8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  z-index: 5;
}


.heading p{
    color:  #080808;
    text-align:center;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.4);
    font-weight: 100;
    letter-spacing: 7px;
    background: #F5F5F5; 
}

.titleMessage .heading .main{
    font-size: 50px; 
}


.titleMessage .heading .sub{
    font-size: 23px; 
}

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

Setting up CSS Flexbox so that the first child element is the same height as the

I am striving to ensure that when the layout switches to mobile, the image block matches the height of the title and content blocks. The layout is quite complex; it functions correctly in desktop view with the title block at the top full-width. I suspect ...

cssflexbox

Unable to access Vimeo video via embedded link - Link appears to be broken

I've embedded a responsive Vimeo video within a link, but the link is not functioning and does not show a cursor upon hovering. Any suggestions on what could be causing this issue? .container { position: relative; margin-bottom: 20px; max-width: ...

htmlcssvimeo-player

Rotate image in Vue3 using @click

I have a dashboard with a refresh button that I want to rotate 360 degrees every time it is clicked. How can I achieve this rotation effect on the image with each click of the refresh button? Below is the code snippet I have been working on, but it only r ...

javascriptcssvue.jsvuejs2

Centering a Font Awesome icon within its parent element

Below is the code I am using: <div style="width:60px; height:60px; background-color: lightgrey;"> <a class="" href="javascript:void(0)" style="color: black; width: inherit; height: inherit;"> <i class="fa fa-lg fa-play" aria-hidden="t ...

cssfont-awesome

Locating the top 3 largest values in an HTML data table and highlighting them in red

Issue Description: I am working with data that displays the electricity consumption of different buildings in HTML tables. There is a possibility that these tables may contain duplicate values. With the use of jQuery, I am seeking a method to identify an ...

javascriptjqueryhtmlarrays

Monitoring user clicks using JavaScript code implemented

Currently, I am utilizing a JavaScript file to load on certain pages in order to track various events. Within this JavaScript file, there is a collection of selectors that have listeners attached to them. When these selectors are clicked, the tracking AP ...

javascripthtml

Having issues with the <ul> tag not displaying correctly

I'm currently working on implementing a side navbar for my website, but I've run into an issue with spacing. In the demo linked in my fiddle, you'll notice that the <ul> element inside the receiptDropDown class doesn't push the k ...

htmlcss

How to fix the issue of the mobile Chrome bar occupying part of the screen height in CSS

I am encountering a well-known issue with my collapsible scrollable bar implemented in Bootstrap. The problem occurs when scrolling on mobile devices, as the search bar takes up space from the sidebar's 100% height, causing the scrollbar to not reach ...

javascriptjqueryhtmlcsstwitter-bootstrap

Include an additional tag solely by using a specific set of keys predetermined in advance

After getting inspiration from Stackoverflow, I decided to enhance my text-box with a tagging feature. The first step was downloading and adding the http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js file to my ASP.NET web folder, allowing me to u ...

javascriptjquerycssjquery-eventskeystroke

Is there a way for me to retrieve the name of a newly opened browser tab from the original tab?

I have written a code snippet to create a new tab within the same browser by clicking on a link. function newTab() { var form1 = document.createElement("form"); form1.id = "newTab1" form1.method = "GET"; form1.action = "domainname"; //My ...

javascriptjqueryhtml

Error alert: $.simpleWeather function not found

Currently, I am attempting to incorporate simpleWeather.js from the website simpleweatherjs.com into my own website. However, upon inserting the html code onto my website, an error message pops up: Uncaught TypeError: $.simpleWeather is not a function ...

javascriptjqueryhtmlfunctionreference

A guide to disabling daily checkboxes and retrieving the chosen values using Angular.js

Within a single table, I have incorporated a dynamic drop-down list that spans over 7 days. Additionally, I have implemented a "+" button that allows for the creation of additional rows dynamically for each day. Each row within the table features a checkb ...

javascripthtmlangularjs

Unusual Behavior of *ngIf and jQuery in Angular 5: A curious case

I'm encountering a strange issue when using the expand-collapse feature of Bootstrap 4 with *ngIf for expansion and collapse. I noticed that the jQuery doesn't work when *ngIf is used, but it works fine when *ngIf is removed. HTML: <div cla ...

htmlangulartypescript

The align-items property in Flexbox is not functioning as expected when applied to Link components contained within

I'm in the process of creating a simple navigation bar using flexbox, but I'm encountering an issue where the content within the unordered list is not vertically centered. Below is the HTML code snippet: *,*::before,*::after{ margin: 0; ...

htmlcssreactjsflexboxnext.js

Horizontal scrollbar appearing on larger screens

My website utilizes bootstrap and some custom css. I have a specific css class named "full-width" designed to break out of the parent bootstrap "container" in order to make the background color extend across the entire width of the screen. However, I recen ...

htmlcss

Using jQuery to modify a CSS property when a specific option is chosen

I'm currently working on creating an option dropdown menu and I've hit a roadblock trying to display a textbox only when the 'other' option is selected. Here's what I have so far: <span id="con-country"><label for="count ...

jqueryhtmlcssmenu

Can you please provide instructions on how to implement an ng-repeat loop within an HTML table?

<thead> <tr> <th ng-click="sortData('firstname')"> Firstname <div ng-class="getSortClass('firstname')"></div> ...

htmlangularjsangularjs-ng-repeatsingle-page-application

The nth-child selector fails to function properly with a customized MUI component in CSS

I've created a styled component as shown below: const FormBox = styled(Box)(({ theme }) => ({ width: "47vw", height: "25vh", backgroundColor: theme.palette.grey[100], borderRadius: theme.shape.borderRadius, marginLeft: ...

javascriptcssreactjsmaterial-ui

Tips for aligning text to the right and button to the left while ensuring responsive design with CSS

Trying to align text on the left and the button on the right with space between them in a responsive card design. The button has a background image added to it. Here is my attempted CSS, but the design is not yet fully responsive: .component { disp ...

htmlcss

Template not found: Error encountered in nodemailer-express-handlebars: ENOENT: The specified file or directory does not exist in the node

I've been attempting to utilize nodemailer and express-handlebars in my node.js application to send a template form. However, I keep encountering the "no such file" error. Unfortunately, I have no clue what I'm overlooking or missing. Here is m ...

htmlnode.jsexpressnodemailerexpress-handlebars