Prevent background from collapsing by considering the context

I am facing an issue with a div that contains a background image and some text. I need the text within the div to not overlap with a specific part of the background image (the ribbon part). Please refer to the images linked below for a clearer understanding of my requirement. Here is how it should appear on all screens (except phones)

However, this is not the desired output. I want the text to maintain a distance from the ribbon on all screen sizes

Here is the HTML code:

    <div id="overview1" class="col-md-4">
        <div class="row d-flex align-items-center height-33">
        <div class="col-lg-4 col-md-5 d-sm-block d-none"></div>
            <div class="benefits col-lg-8 col-md-7">
                <h3 class="text-uppercase overview1-heading ms-3">
                    <span class="overview1-text">2023</span>
                    <span class="overview1-text">benefits</span>
                    overview
                </h3>
            </div>
         </div>
     </div>

And here is the CSS code:

    #overview1 {
        background-image: url("ribbon.jpg");
        background-position: 10% 100%;
        background-size: cover;
        background-repeat: no-repeat;
        color: white;
    }

Answer №1

If it were up to me, I'd suggest a different approach. Instead of placing the background-image directly on #overview-1, I would recommend creating two columns: one for the image and the other for the text.

Providing more HTML & CSS would make it easier for me to assist you. Additionally, having a similar image to test with would be extremely beneficial.

Consider something along these lines:

<div id="overview1" class="col-md-4">
  <div class="row d-flex align-items-center height-33">
    <div class="col-lg-4 col-md-5 d-sm-block d-none"></div>
    <div class="benefits col-lg-8 col-md-7">
      <div class="row">
        <div class="col-6">
          <!-- Image should go here -->
        </div>
        <div class="col-6">
          <h3 class="text-uppercase overview1-heading ms-3">
            <span class="overview1-text">2023</span>
            <span class="overview1-text">benefits</span> overview
          </h3>
        </div>
      </div>
    </div>
  </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

Prevent ui-select from being highlighted when clicked

here's a dilemma : (all in angular 1) I'm using a ui-select like this : https://i.stack.imgur.com/RzH2u.png Here's the code snippet : <div class="formZone-group"> <div class="mandatory-fl"> <div class="man ...

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

Flex children do not adhere to max-height and max-width properties

There seems to be an issue with setting the max-width and height for flex children. The div is getting squished down to fit its children exactly, possibly due to the styling associated with div .content. It's not clear why this is happening. The divi ...

Using jQuery to toggle between multiple divs, turning one on while turning off the others

Hey there, I'm currently brainstorming ways to utilize an accordion widget in a unique way. Specifically, I want each h3 trigger to reveal a different div when selected, hiding the previous one in a seamless manner. Picture this - A sleek three ...

What are the steps to achieve such a design?

Can you show me how to create a single layout using HTML and CSS? I am struggling with splitting the screen properly. Could you provide a simple example, maybe on jsfiddle? https://i.stack.imgur.com/d2rbn.jpg Thank you in advance! EDIT: I have added a ...

Tips for customizing styles when an element is being dragged over in Material-UI?

If I want to alter the backgroundColor when hovering, I can utilize sx={{"&:hover":{backgroundColor:"yellow"}} Is there a way to adjust the backgroundColor on dragover? It appears that sx={{"&:dragOver":{backgroundCol ...

TypeScript code runs smoothly on local environment, however encounters issues when deployed to production

<div> <div style="text-align:center"> <button class="btnClass">{{ submitButtonCaption }}</button> <button type="button" style="margin-left:15px;" class="cancelButton" (click)="clearSearch()"> {{ clearButtonCapt ...

Attempting to rearrange the table data by selecting the column header

In an attempt to create a table that can be sorted by clicking on the column headers, I have written code using Javascript, HTML, and PHP. Below is the code snippet: <?php $rows=array(); $query = "SELECT CONCAT(usrFirstname,'',usrSurname) As ...

Updating the value of a localStorage key after each successful AJAX call in JavaScript

I'm currently facing a challenge with my local storage key value. The issue is that it doesn't update the value when the AJAX call successfully returns data. It only retains the old stored data, requiring me to manually refresh the page by pressi ...

What are the steps to change table characteristics?

I currently have this segment of HTML code: <table cellspacing="0" cellpadding="0" width="100%"> After validating my HTML document, I discovered that these attributes are outdated. However, removing them would affect the alignment of my website. I ...

Customizing the display field in an ExtJs Combobox

I am working on a java web application that utilizes an entity class to populate a combobox with ExtJs. The issue I am facing is as follows: Some entries in the displayField may contain html code. To prevent any issues, I used flexjson.HTMLEncoder during ...

Is it time to advance to the next input field when reaching the maxLength?

In my Vue form, I have designed a combined input field for entering a phone number for styling purposes. The issue I am facing is that the user needs to press the tab key to move to the next input field of the phone number. Is there a way to automaticall ...

Retrieve data from a website's API endpoint using JSON format and display it on a

I came across a URL that displays [{"outlet_group_id": "29","outlet_group_name": "Parco","outlet_group_code": "0000010"}] and I have the following code snippet <script> $(document).ready(function() { $.getJSON('http://sampl.elinkurl.com/ ...

The CSS code seems to be refusing to connect and cooperate with the Spring Boot application

https://i.sstatic.net/CUrYN.png This is an image of my current project. I have placed my css file in the static/css folder and I am attempting to connect it to my index.jsp page, but unfortunately, it is not functioning as expected. I have already tried ...

Connections between Wordpress websites and CSS styling

My inquiry consists of three parts: I am currently in the process of constructing a portfolio website using Wordpress, and I have encountered some peculiar links. For instance, on my about page, the link appears as localhost/AFolder/anotherfolder/ind ...

npm installation for phonegap failed due to shasum check discrepancy

I've attempted numerous times, but I keep encountering this error (shasum check failed) 4784 error Error: shasum check failed for C:\Users\FENGXI~1\AppData\Local\Temp\npm-7004-QbpFFte5\1387269030233-0.28223602287471 ...

In Google Chrome, the :after element on the left is cleared, while other browsers do not

In an effort to create a button using background images in the :before and :after pseudo-selectors for cross-browser compatibility, an issue arose where only Chrome did not display it correctly (Safari results were unknown). HTML: <div class="btn-cont ...

How do I retrieve the value of a class that is repeated multiple times?

In the HTML code I am working with, there are values structured like this: <div class="item" onClick="getcoordinates()"> <div class="coordinate"> 0.1, 0.3 </div> </div> <div class="item" onClick="getcoordinates() ...

Analyzing text with improperly defined attributes

As I attempted to analyze an HTML document as XML by adding the XML start at the beginning, I encountered an issue with attributes within tags. <tr> <td class="yfnc_tabledata1" nowrap align="right">Jun 4, 2013</td> <td class="yfnc_tab ...

Parsing HTML to access inner content

Currently, I have integrated an onClick event to an anchor tag. When the user interacts with it, my objective is to retrieve the inner HTML without relying on the id attribute. Below is the code snippet that illustrates my approach. Any assistance in acc ...