Designing a dynamic patterned backdrop that seamlessly extends for a column in bootstrap

Experiencing some difficulties with Bootstrap and creating a resizable column background.

In one row, there is a column with a fluid image at the top, another column below it with a CSS class that gives it a repeating background along the Y axis, and finally a column at the bottom with another fluid image.

The concept is to have the top and bottom images serve as the ends of a box, while the background image in the center repeats along the Y axis to create the illusion of a closed box regardless of content length.

However, despite various attempts, the center box's background image always appears misaligned and overflows slightly (refer to the linked image). Can anyone offer assistance in aligning this properly?

https://i.sstatic.net/6qjye.jpg

Here is the code being used:

HTML

<div class="row">

    <div class="col-lg-12 col-md-12 col-sm-12 col-12 order-2">
        <img class="img-fluid" src="img/games/crabs/framework/box-top.png" alt="What is Crabs">
    </div>

    <div class="col-lg-12 col-md-12 col-sm-12 col-12 order-3 crabs-textbox-centre">
        <h1 class="text-center">
            <span class="text-danger strong">
                CRABS is an arena based, multiplayer, party brawler extravaganza!
            </span>
            <br>
        </h1>
        <h2 class="text-center">
            Battle friends or AI across a range of unique and exciting game modes in competitive and co-op local couch play.
        </h2>
        <h2 class="text-center">
            Current and next-gen platforms.
        </h2>
    </div>

    <div class="col-lg-12 col-md-12 col-sm-12 col-12 order-4">
        <img class="img-fluid" src="img/games/crabs/framework/box-bottom.png" alt="What is Crabs">
    </div>

</div>

CSS

.crabs-textbox-centre
    padding: 0 40px 0 40px;
    background-image: url("../img/games/crabs/framework/box-centre.png");
    height: auto;
    background-repeat: repeat-y;
    background-size: 100%;
    background-position: center center;

Answer №1

Thank you dear fatalcoder for your input... I managed to resolve the issue by implementing the following configuration:

To address the top and bottom sections, I introduced two distinct CSS styles with individual backgrounds, which I then inserted above.

For any specific mobile sizing requirements, I utilized a media query as shown in the code snippet below:

HTML

<div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-12 order-1 crabs-textbox-top">
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-12 order-2 crabs-textbox-centre">
            <h1 class="text-center"><span class="text-danger strong">CRABS is an arena based, multiplayer, party brawler extravaganza!</span><br></h1>
            <h2 class="text-center">Battle friends or AI across a range of unique and exciting game modes in competitive and co-op local couch play.</h2>
            <h2 class="text-center">Current and next-gen platforms.</h2>
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-12 order-3 crabs-textbox-bottom">
            </div>

        </div>

CSS

.crabs-textbox-top{
    margin: 20px 0 0 0;
    height: 64px;
    background-image: url("../img/games/crabs/framework/box-top.png");
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: bottom center;
}

.crabs-textbox-centre{
    padding: 0 60px 0 60px;
    height: auto;
    background-image: url("../img/games/crabs/framework/box-centre.png");
    background-repeat: repeat-y;
    background-size: 95%;
    background-position: center center;
}

.crabs-textbox-bottom{
    margin: 0 0 20px 0;
    height: 64px;
    background-image: url("../img/games/crabs/framework/box-bottom.png");
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: top center;
}

@media screen and (max-width: 767px) {

.crabs-textbox-top{
    margin: 10px 0 0 0;
    height: 30px;
    }

.crabs-textbox-bottom{
    margin: 0 0 10px 0;
    height: 30px;
    }
    
}

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

Displaying outcomes in dialog box when button is pressed

I am working on a website where I want to enhance the user experience by displaying output in a dialogue box upon click. The current setup involves the user selecting a vendor and time duration, with the results appearing below the Submit button. However, ...

Adjustable table region in PHP

I need help with displaying multiple results in a dynamically created table within my program. Even though I want to show around 25 records, the program cuts off after the 5th record, leaving empty space. The issue seems to be that the area does not expand ...

Update a section of my PHP webpage using setInterval()

How can I refresh a PHP value every second using setInterval()? I am familiar with refreshing values in HTML, but now I want to do the same with PHP values. Here is my code: <script> setInterval(function() { <?php $urlMachineOnline = ' ...

Ensure the TUMBLR og:image appears in larger dimensions for enhanced visibility [updated: additional code implemented]

I recently incorporated two widgets into my blog - one on the sidebar and another attached to each post. You can check them out at . To enhance the visual appeal, I uploaded a 900x900 og:image to the tumblr static servers, accessible through my FB Debug p ...

What is the best way to trigger an onclick event for an input element with a type of "image"?

In the code I'm working on, there's an input of type "Image". <div class="icon" id="button_dictionary"> <form> <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary"> ...

Adding a 'dot' to the progress bar in Bootstrap enhances its visual appeal

I am currently working on a progress bar and I would like it to look similar to this: https://i.sstatic.net/TSDEy.png However, my current output looks like this: https://i.sstatic.net/rQhYc.png I'm puzzled as to why the tooltip is floating there, ...

Tips on connecting a font directory from FontAwesome

I am currently attempting to incorporate the fonts provided by FontAwesome for their icons, and they specify that a root folder named Fonts is needed. My attempt to link it was using: <link type="text/css" href="/myPath/font" /> ...

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

Using jQuery, I am adding HTML code to a div. One part of this code involves referencing a div's ID by concatenating a variable from a loop. $(... + '<div class="recommendations filter" id="recCards-'+ i +'">' + &apo ...

Create a copy of a div element once the value of a select element has

After modifying a select option, I'm attempting to replicate a div similar to the example shown in this link: http://jsfiddle.net/ranell/mN6nm/5/ However, instead of my expected lists, I am seeing [object]. Any suggestions on how to resolve this issue ...

(Monetate) Resolving the issue of delayed transition between the <a> element and CSS arrow in the breadcrumb menu utilizing HTML/CSS/jQuery

Recently, I've been working on implementing a breadcrumb-style checkout progress indicator on my website using a code generator created by an incredible developer named Jonas Ohlsson. This feature utilizes HTML, CSS, and jQuery and is integrated into ...

Hiding elements in dark mode using `hidden` or `block` in Tailwind will not override its own hidden selector

To switch between dark and light mode for these two images, the dark:block selector does not override the hidden class. <div className="ml-5 content-center"> <img className="hidden dark:block h-6 w-auto my-1" src="/stati ...

Incorporate a jQuery userscript on Firefox that includes a link to a form

Attempting to incorporate a search link into an online form using a userscript with jQuery, specifically for Firefox. I typically work in Chrome, so I'm encountering some challenges with compatibility in Firefox. However, I need this to be functional ...

Find all objects in an array that have a date property greater than today's date and return them

I have an array of objects with a property called createdDate stored as a string. I need to filter out all objects where the createdDate is greater than or equal to today's date. How can this be achieved in typescript/javascript? notMyScrims: Sc ...

The command response.setHeader("Refresh", "0") failed to execute

My webpage needs to be refreshed when the user session has expired or the connection is not active. Despite trying various codes, I have been unsuccessful in achieving this. The last code snippet that I implemented is as follows: if(session.getAttribute(" ...

How to utilize the ternary operator efficiently to evaluate multiple conditions in React

Is there a way to change the style based on the route using react router? I want the description route to display in orange when the user is in the description route, white when in the teacher-add-course route, and green for all other routes. However, th ...

The <br/> tag is not functioning properly when retrieving text from a MySQL query

Currently, I am involved in a project that involves an A.I pushing text onto a MySQL database. Our goal is to display the ongoing writing process on a webpage. We are still actively working on this. We are retrieving the data and regularly checking the da ...

Choosing the relevant kendo row on two different pages

I am facing a situation where I have a Kendo grid displayed on a dashboard page. Whenever a user selects a row in this grid, I need to load the same row in another Kendo grid on a separate ticket page to showcase the details of that particular ticket. The ...

Adjust the size and color of text in Chart.js using Angular 5

Why does the font color in chartjs appear as light gray and not print when you want to do so from the page? I tried changing the font color of chartjs in the options attribute, but it didn't work. How can I change the font color in chartjs angular? ...

What is the best way to utilize $(target) within a directive?

I created a custom directive for selecting time using two blocks. The challenge is detecting the target event on specific blocks within the directive's template. Directive Template: <div class='time-picker-container'> <div clas ...

All browsers experiencing issues with autoplay audio function

While creating an HTML page, I decided to include an audio element in the header using the code below: <audio id="audio_play"> <source src="voice/Story 2_A.m4a" type="audio/ogg" /> </audio> <img class= ...