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

I am struggling to understand why clicking this button is not successfully submitting the form to Google Sheets

I am facing an issue with my Google Sheet setup that collects form data from my website. The problem is, I am unable to link the event to a button that already exists ('CompleteOrder'). Strangely, it works perfectly fine if I add a new button: & ...

javascripthtmlgoogle-apps-script

Experiencing problems with malfunctioning javascript tabs

As a beginner user and coder, I'm currently working on creating a portfolio website. I had the idea to implement tabs that would allow for content swapping, but unfortunately, I'm having trouble getting the JavaScript to function correctly. I at ...

javascripthtmlcss

How to Ensure an Element Appears Above Another Despite Z-Index Troubles?

After conducting approximately 2 hours of research on this topic, I was unable to find clear answers or solutions. Hence, I have decided to address the issue here. The problem I'm facing is as follows: Due to the nature of HTML/CSS, it seems impossi ...

javascriptjqueryhtmlcssz-index

What is the best way to incorporate a search feature within Bootstrap cards?

I've been struggling to incorporate a search feature within my bootstrap cards. Despite trying various online methods, none have proven successful for me so far. Below is my HTML code - any assistance in implementing a search filter into my app would ...

javascriptpythonhtmlcss

Enhance the aesthetics of material-ui tooltips by utilizing @emotion/styled

Can material-ui tooltips be customized using the styled function from @emotion/styled? import { Tooltip } from '@material-ui/core'; import styled from '@emotion/styled'; const MyTooltip = styled(Tooltip)` // customize the tooltip ...

cssreactjsmaterial-uiemotion

Guide to creating a versatile navigation bar using Bootstrap and HTML

I am looking to create a navigation menu that can be easily reused across multiple pages on my bootstrap/html website. Instead of duplicating code, I want to implement a solution for creating a reusable navigation menu in bootstrap/html. How can this be ...

javascripthtmltwitter-bootstrap

Is it just me, or does the float left - float right combination only break in IE

Oh dear, it seems like IE9 is causing some trouble again. The other "capable" browsers handle this HTML just fine, including IE8 which isn't even that great. Here's the code snippet: <div class="contact_info_city" id="contact_info_cityX"> ...

htmlcssinternet-explorercss-floatline-breaks

Troubleshoot: Unable to trigger change event for input type file

Hey, I'm trying to capture and display the file name that a user selects using an input type file control. Unfortunately, the jQuery onchange event doesn't seem to be working in IE 8. Does anyone have a solution for this? // Here's my jQuer ...

jqueryhtmlformsjquery-selectors

How to update icon for fa-play using Javascript in HTML5

I recently added an autoplay audio feature to my website. I would like to implement the functionality to pause and play the music, while also toggling the icon to fa-play at the same time. This is the HTML code I am using: <script type="text/javascri ...

javascripthtml

Jquery is causing some issues with the code provided:

This is the code snippet from script.js: $(document).ready(function() { $('#mainobject').fadeOut('slow'); }); Here is a glimpse of index.html: <!DOCTYPE html> <html> <head> <title>Hitler Map&l ...

javascriptjqueryhtml

Safari does not support font-face rendering, unlike Chrome

I am in the process of creating a typewriter-style font page using a local font. I have used @font-face to import it, and while it displays correctly on Google Chrome, it does not render properly in Safari. You can view the web page here: (you will need ...

css

Unable to modify variable to play audio

As I work on constructing my website, I am incorporating various sounds to enhance user experience when interacting with buttons and other elements. However, managing multiple audio files has proven challenging, as overlapping sounds often result in no aud ...

javascripthtmlaudiovar

Achieve a full-width background video without adjusting the height, preferably without the use of JavaScript

I have scoured various sources in search of the answer to this question but have come up empty-handed. While I am aware that similar queries have been made before, please hear me out. I am interested in incorporating a video background on a website where ...

csshtmlvideo

Reasons for dividing by 1 in JavaScript

While completing a basic programming assignment from my teacher, I encountered an interesting issue in Javascript. I found that when dividing a number by 1, it returns an unexpected value. Can anyone provide an explanation for this? I have created a jsfidd ...

javascripthtmlmath

Decorate the elements that do not contain a specific child class

I'm currently working on an angular project with primeng for the UI components. My focus at the moment is on customizing the p-menu component, specifically the appearance of list items that are not active. The challenge I'm facing is that the act ...

cssangularprimeng

Transforming hexadecimal color codes into spans

I've been experimenting with regex patterns to transform hexadecimal colors into spans. Take this example: #FF0000Hello#00FF00There <span style="color: #FF0000">Hello</span><span style="color: #00FF00">There</span> ...

phphtml

What are some strategies for creating a smooth transition with a max-height of 0 for a single-line div?

I have a div that is one "line" in height. When a button is clicked, I want it to disappear and simultaneously another div with more lines should appear. I have managed to make this work, but no matter what I do, the one-line div disappears very quickly al ...

jqueryhtmlcss

Selecting Child Elements in CSS

Suppose I have the below HTML structure: <div id="div1"> .... <span class="innercontents">...</span> .... </div> Is it possible to target only the child elements of a specific parent ID? For example, could I use this CSS rule? # ...

htmlcsscss-selectors

Slight Misalignment of Elements

I am attempting to align two corners of an element so that they perfectly match the corners of another element. In simpler terms, I am aiming to synchronize the corners of one element with those of another element. Below is the code snippet: ... When y ...

javascripthtmljquerycss

Executing a function in JQuery with care

Hey there, I have a total value output and I am trying to add a function that links to it. Unfortunately, I am encountering some issues while trying to put it together. The console keeps showing NaN or the "not defined" error. Here is the function I want ...

jqueryhtml