Preventing Banner Images from Covering Side Carts in E-commerce Stories - Tips and Tricks

I'm encountering an issue with the side cart and suspect that my CSS is to blame. Can you assist me in resolving this problem?

The webpage has a background image—a full-width banner. However, when I open the side cart, the image overlaps it, concealing the content within the cart.

You can access the page here:

To observe the issue, simply click on the cart to open the side cart.

Here is the HTML section:

This is my current CSS:

#header-image {
    background-image:url("{{ 'Ladyinblue Copy.jpg' | asset_url }}");
    width: 8980px;
    height: 450px;
    position: relative;
    margin: 0 auto;
    margin-left: -3999px;
    margin-right: 0;
    background-repeat:no-repeat;
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
    margin-bottom: 10px;
    overflow:hidden;
}

Your assistance in identifying any errors would be greatly appreciated!

Thank you for your help!

htmlcssimagebackground

Answer №1

To achieve a full horizontal screen image, you can remove the width property and refrain from using a container with width: 1200px.

#header-image {
    background-attachment: fixed;
    background-image: url("//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/Ladyinblue%20Copy.jpg?12631246775371885148");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    margin: 0 0 10px -3999px;
    position: relative;
}

Full width image implementation:

<div class="container"> your header </div> // close container
<div id="header-image"></div>
<div class="container main content"> // open container again
<div class="sixteen columns clearfix collection_nav">
  <h1 class="collection_title">
    About Us
  </h1>
</div>

<div class="sixteen columns page">
    <p style="text-align: left;"><a href="http://innovo-medical.com">Innovo Medical</a>&nbsp;is a privately-held company located in Stafford, TX primarily involved in the design and manufacturing of <a href="http://innovo-medical.com">Medical Products</a>. The company was born out of frustration with companies cutting corners in the name of corporate profit. We believe that medical equipment&nbsp;should be reliable, safe and simple to use.</p>
<p>Customers’ feedbacks are the backbone of every product we launched. Our products have been wildly successful because we take every single customer’s feedback seriously. If you have any concerns or questions with our product, please contact our customer service team. We listen and We deliver. That is our promise.</p>
<br>
<div style="text-align: left;"><a title="Innovo Google Plus: Innovo Groups Medical Supplies" target="_blank" href="https://plus.google.com/u/0/+Innovogroups/posts"><span>Interact with Innovo on Google+</span></a></div>
<div style="text-align: left;"><a title="Innovo Facebook - Innovo Groups - Medical Supplies" target="_blank" href="https://www.facebook.com/InnovoG/">Like Innovo Products on Facebook</a></div>
<div style="text-align: left;"><a title="Innovo Twitter: Innovo Groups Medical Supplies" target="_blank" href="https://twitter.com/InnovoG">Follow Innovo Medical Equipment on Twitter</a></div>
<div style="text-align: left;"><a title="Innovo Pinterest: Innovo Groups Medical Supplies" target="_blank" href="https://www.pinterest.com/innovomedical/">Pin Innovo Medical Supplies&nbsp;on Pinterest</a></div>
<div style="text-align: left;"><a title="Innovo LinkedIn: Social Media | Medical Supplies | Innovo Groups" target="_blank" href="https://www.linkedin.com/company/10252810">News and Headlines from Innovo on LinkedIn</a></div>
<div style="text-align: left;"></div>
<div style="text-align: left;">More reviews at Innovo Google+ and Innovo Facebook pages</div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
</div>
</div>

Note: It's recommended to understand the code rather than copying it verbatim.

Answer №2

Here are my findings up to this point:

  • After experimenting in Google Chrome 55, applying the display:flex; style to the <div class="content"> produced the desired effect as per your instructions;

  • However, when testing in Safari 11, clicking on the "Menu" button did not reveal the menu even with the same styling applied;

  • In Internet Explorer 10 and Edge 18, the functionality worked flawlessly without any additional styles.

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

Adjust the width to ensure the height is within the bounds of the window screen?

I am currently in the process of developing a responsive website, and my goal is to have the homepage display without any need for scrolling. The layout consists of a 239px tall header, a footer that is 94px tall, and an Owl Carousel that slides through im ...

javascriptjqueryhtmlcss

Empower the user with the ability to interact through touch on dynamically

I am trying to make a div touchable and draggable. I have dynamically created 1 to 10 divs within another div. Currently, these divs can only be dragged using the mouse or cursor. However, I want to enable dragging through touch as well. Can anyone provi ...

javascriptjqueryhtml

The Eclipse IDE is experiencing issues with the functionality of the JavaScript Number class

In my latest project, I decided to create a Dynamic Web Project using the Eclipse IDE 2019-12 along with Apache Tomcat 8.5.55 server. The main functionality of this project is that a user can input integers and receive their sum as an output. To ensure dat ...

javascripthtmleclipse

Changing the image source when clicking on it and removing it can be done by using JavaScript

How can I add a class 'selected' to ".swiper-slide" when it is clicked? I also want to change the image src when svg-img1, 2, or 3 is clicked. However, I need the image to revert back to its default src when another swiper-slide is clicked. ...

javascriptjquerycss

Create an HTML form that sends email notifications using a third-party form backend platform

I recently designed a form using Webflow and integrated it with Getform.io for the backend platform. Everything is running smoothly, including data collection and file uploads. However, I now want to enhance the form by enabling it to automatically send ...

phphtmlforms

Exploring the power of add() method in getStyleClass() along with some code snippets

Recently, I successfully created a custom button in JavaFX by tweaking the style of a simple button using the setStyle() method with different String parameters based on whether the button was clicked or not. I wanted to convert this customized button int ...

javacssanimationjavafxcustom-controls

Could one harness the power of SO's script for adding color to code within questions?

Similar Question: Syntax highlighting code with Javascript I've observed that Stack Overflow utilizes a script to apply color coding to any code shared in questions and answers, making it resemble how it would appear in an IDE. Is this script pub ...

javascriptjqueryhtmlajax

Converting Mat-Raised-Button into an HTML link for PDF in Angular 6 using Material Design Library

Greetings, I have a couple of interrelated inquiries: Upon clicking the code snippet below, why does <a mat-raised-button href="../pdfs/test.pdf"></a> change the URL (refer to image 4) instead of opening test.pdf in a new window? If I have a ...

htmlangulartypescriptangular-material2

Elements that are sortable will remain in place even after being removed from

In my project, I have created a list with sortable elements that can be deleted by dragging them into a trash bin. However, I am facing an issue where the element remains visible even after being removed. <div class="content-remove" id="content-rem ...

jqueryhtmljquery-uijquery-ui-sortablejquery-ui-droppable

What is the best way to assign attributes to all items in an array, excluding the currently selected one?

I need to implement dynamic buttons in my HTML document while a JavaScript class is running and receives a response from the backend. I am using jQuery and vanilla JS, and have included an example below to demonstrate this functionality. The goal is to dis ...

javascripthtmljquerybootstrap-5

JavaScript and AJAX: Dynamically Create URLs

I don't have any experience with web development, so could you please explain in detail? If my questions are unclear, feel free to ask for more information. Imagine I have a webpage with the following URL: www.mycompany.com/category1 This page has ...

javascriptjqueryhtmlajaxurl

What is the best method for obtaining the HTML content of a webpage from a different domain?

I'm in the process of creating a website where I have the requirement to retrieve the HTML content of a different site that is cross-domain. Upon researching, I came across YQL. However, I don't have much experience with YQl. Is it possible to ad ...

javascripthtmlajaxyql

Can you explain the significance of the <%= %> HTML tag?

I've recently been tackling a project with Webpack. For those not familiar, Webpack is a bundler that combines all your files into one final product. One task I encountered was trying to insert one HTML file into another, similar to an import or requ ...

javascripthtmlwebpacktags

Placing a JavaScript button directly below the content it interacts with

I am currently working on a button that expands a div and displays content upon clicking. I am facing an issue where I want the button to always be positioned at the bottom of the div, instead of at the top as it is now, but moving it within the parent div ...

javascriptjquerycss

Determine image size (pre-upload)

One of the requirements for a project I am working on is to verify the dimensions (width and height) of images before uploading them. I have outlined 3 key checkpoints: 1. If the dimensions are less than 600 X 600 pixels, the upload should be rejected. ...

javascriptjqueryimage

Easily center list item numbers vertically within fixed height containers

I am facing an issue with the alignment of ordered list item numbers in a list with fixed height and vertically centered content. The numbers seem to be positioned inaccurately. li { height: 80px; border: 1px solid black; } li > span { heigh ...

htmlcss

Clicking will open the link in both a new tab and the current tab

I'm looking to enable ng click functionality to work in both new tabs and the current tab. The URL is dynamically generated based on a certain condition. Here is the HTML: <a ng-href="{{myPathVariable }} " ng-click=" GoToThemes()" class="shift-l ...

javascriptjqueryhtmlangularjs

CSS Element Overlapping Issue in Safari Browser

I am currently developing an audio player for my application that includes a pause/play button, next button, and back button. I have encountered a problem specifically on Safari where the back/pause buttons are overlapping each other. The play/pause button ...

javascripthtmlcssnext.js

Question: When referencing $(this) in a different div, how can you navigate back to the previous div and access its children elements in jQuery?

Here's the code I've been working on: When a user clicks on a link with the class '.like', I want the total number of likes (found in the div.postInfo as '.PostlikeCount') to update and display the new total. $(".like").cl ...

jqueryhtmlajaxparenttraversal

Refresh a div using jQuery and include PHP files for dynamic content updating

This is the code I am using to dynamically update divs containing PHP files: $(document).ready(function() { setInterval(function() { $('#ContentLeft').load('live_stats1.php').fadeIn("slow"); $('#ContentRight').load( ...

javascriptphpjqueryhtml