Is there a way to prevent this picture from shifting?

I am currently revamping the content on my work website using Joomla. I have received the old copy and now I need to enhance it. The website in question is 24x7cloud.co.uk. At the bottom of the page, I aim to include an "Accreditation's" section. However, whenever I try to add this new section, it seems to affect the "Contact Us" section below it. (See attached screenshots for reference)

The issue arises with the grey overlay covering the entire image and the image getting stretched too far down. Ideally, the image should cut off at the point where the grey banner intersects with the telephone box. This problem occurs only when the accreditation section is added; otherwise, the image displays correctly...

The Orange scribble indicates the broken part that shouldn't be there. It should end where the grey banner stops.

Here's how the website should look like.

And here is what happens when a new section is added above.

Below is the HTML code for the "Contact Us" section:

If this information does not provide enough clarity, check the Firefox element snippet below:


<section id="contact" data-stellar-background-ratio="1.0" data-stellar-vertical-offset="" style="background-position: 50% 0px;" class="current">
    <div class="row text-center" style="position:relative;">
        <div class="parallax-overlay"></div> 
            <div class="container content">
                <div class="moduletable">

                    <div class="custom">
                        <div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;"></div>

                        <div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">
                            <h2>Contact us</h2>
                            <p class="lead">We would love to work with you!</p>

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                                <h3><small class="white"><a href="callto:+443302231042" style="color:#FFFFFF;"><i class="icon ion-ios7-telephone ion-1x white"></i> 0330 223 1042</a></small></h3>
                            </div>
                            
                            <!-- More contact details and social media icons go here -->

                        </div>
                    </div>
               
                </div>
            </div>
    </div>
</section>

Apologies for the extensive code dump, but I wanted to ensure all relevant details were included to facilitate understanding. Despite several attempts, I haven't been able to resolve this issue. Any assistance or guidance would be greatly appreciated.

phphtmlcssweb

Answer №1

Modify the #contact CSS rule from z-index:1 to z-index:-1;

#contact {
  background-position: center 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../img/bg_8.jpg);
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  z-index: -1;
  color: #121212;
}

This change will position the image behind the text, creating a layered effect.

For more information, visit https://www.w3schools.com/cssref/pr_pos_z-index.asp

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

Storing the information filled out in the form and utilizing it to navigate to the correct destination URL

With the generous assistance and insightful advice from members of Stack Overflow, I am nearing completion of my quiz project. However, I do have a few lingering questions regarding some final touches needed for the project. Before delving into those quest ...

javascriptphpjqueryajaxforms

Equal spacing title in horizontal menu with Bootstrap design

Is there a way to evenly distribute menu links with varying text lengths in equal width bootstrap columns? Adjusting the column class between col-md-1 and col-md-3 doesn't seem to give accurate spacing. If you want to see, I've set up a fiddle h ...

csstwitter-bootstrap

CSS Float behaving unexpectedly

body { margin: 0; font-family: arial; line-height: 16px; } #topbar { background-color: #600c0c; width: 100%; height: 46px; color: white; margin: 0; } .fixedwidth { width: 1050px; margin: 0 auto; } #logodiv { padding-t ...

htmlcsscss-float

Intersection Observer API is not compatible with the functionality of the navigation bar

Having trouble with the Intersection Observer API. Attempting to use it to show a nav-bar with a white background fixed to the viewport once it scrolls out of view. Initially tested using console.log('visible') successfully to determine visibili ...

javascriptcssintersection-observer

php mongodb : Fatal error: Uncaught Error: Call to undefined method MongoDB::insert() in db

Here is the code I am currently running: $db = new Mongo("mongodb://user:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76060136101a171b13581b191811191e075815191b">[email protected]</a>:27081/dbname"); $c ...

phpmongodbphp-mongodb

JavaScript layout: Thymealf

I have a unique thymeleaf template like so: <body> <div id="layout"> <!-- Menu toggle --> <a href="#menu" id="menuLink" class="menu-link"> <!-- Hamburger icon --> <span>& ...

javascriptcsshtmlthymeleaf

transforming a MySQLi connection object into a connection string

Is it possible to convert a mysqli connection object to a string connection? $mysqli = new mysqli("localhost", "my_user", "my_password", "world"); Can we use $mysqli for procedural queries or is that not possible? $query = "SELECT * FROM City ORDER by I ...

phpmysqlmysqli

problem with custom scroll bars on Chrome and Internet Explorer

Below is the URL for the designated folder The vertical scroll bar is functioning properly across all browsers on my personal computer, however, it appears to be malfunctioning on Chrome and IE of a select few other devices. I conducted a test on a machi ...

jquerycssjquery-uigoogle-chromeoperating-system

In order to preserve the data inputted by the user within a file

Check out this HTML code snippet:- ` AngularJS | $http server <div ng-controller="people"> <ul> <h2> Names and Ages of programmers: </h2> <li ng-repeat="person in persons"> { ...

javascripthtmlangularjs

Enhancing Hover Effects in CSS with Additional Backgrounds

How can I create a div that changes its background to black with 50% opacity when hovered over, on top of an existing background image? Thank you! ...

cssbackgroundhover

Comparing dates in JavaScript using the built-in Date object

Currently, I am attempting to compare the current date with the one stored in a database using the code snippet below: <script> $("#registerButton").click(function() { var first = $("#scantime").val(); var second = $("#scanbartime").val(); if (parse ...

javascriptphpajax

How can I verify the presence of multiple keys using Wordpress get_post_meta function?

Trying to figure out conditionals with Wordpress post meta has been a challenge for me. I've been utilizing get_post_meta() to show content when the user has entered data in the post meta field, but now I want to enhance the rule by adding more condit ...

phpwordpress

Brick-themed HTML/CSS elements drift away from each other

I'm currently designing an image collage for my website and attempted to use masonry for the layout. However, when I adjust the size of the blocks, they seem to drift apart, creating large gaps between each block. Any suggestions on how to resolve thi ...

javascripthtmlcssmasonry

Developing XML files with the CodeIgniter framework

I have implemented the following code in Codeigniter to generate XML: public function get_cuisine() { $this->load->dbutil(); $sql = "select * from cuisine"; $query = $this->db->query($sql); $config = array ( 'root& ...

phpxmlcodeigniter

js include exclude switch a category

Although this question has been asked before, I have a query on completely removing an "id" from an element. Let's consider the following scenario: <div id="page"> some content here </div> I want to eliminate the "id" attribute from the ...

javascriptjqueryhtmlcss

Tips for troubleshooting Jquery PHP echo errors

My web form code includes two fields: Name with Date and Title. Using jQuery, I have implemented a feature where the current date is displayed with a calendar, and when the date is changed in the Date field, it automatically updates in the Title field. The ...

phpjquerymysqlpostecho

CSS: How come this inline-block div is not appearing on the same line as intended?

I've been tinkering with using display:inline-block on my div elements, and I'm puzzled as to why my two inner divs aren't appearing on the same line. Both divs have a width of 200px, while their parent div is set at 400px. If I switch the ...

css

Having issues with RTL on MuiTextField when using special characters

Currently, I am working on a project where Mui is being used. I have successfully applied RTL according to the Mui guide. However, I am encountering a frustrating problem where special characters in MuiTextField are aligning to the left instead of the righ ...

cssreactjsmaterial-ui

What is the best way to create a fully clickable navbar item for the Bootstrap dropdown feature?

I'm struggling to make a button in a navbar fully clickable for the dropdown to open. Even when I try adding margin instead of padding, it only makes things worse. Can someone help me figure out what mistake I'm making here? Essentially, my goal ...

javascriptjqueryhtmlcsstwitter-bootstrap

Why isn't my function being triggered by the Click event?

I can't figure out why the click event isn't triggering the btn() function. function btn() { var radio = document.getElementsByTagName("input"); for (var i = 0; i > radio.length; i++){ if (radio[i].checked){ alert(radio[i].value); } ...

javascripthtml