Trouble with CSS background positioning function

Check out this link. I'm having trouble getting the gas pumps to align properly with the content box due to background positioning issues. Can't seem to figure out what's causing it...

Here is the HTML code:

<body>
    <!-- navigation stuff -->
    <div class="w3-row">
        <div id="fill-left" class="w3-col s1 m2 l3">&nbsp;</div>
        <div id="main" class="w3-col s10 m8 l6">
            <div id="content" class="w3-container w3-white">
                <p>Lorem ipsum
            </div>
        </div>
        <div id="fill-right" class="w3-col s1 m2 l3">&nbsp;</div>
    </div>
</body>

And here is the CSS code:

#fill-left {
    z-index: -1;
    background-image: url(bgleft.jpg);
    background-attachment: fixed;
    background-position: right top;
}

#fill-right {
    z-index: -1;
    background-image: url(bgright.jpg);
    background-attachment: fixed;
    background-position: left top;
}

div#main {
    z-index: 1;
    box-shadow: 0px 0px 100px #000;
}

Note: The classes used are from a CSS library called W3.CSS for responsive layouting.

tj;dr I need help fixing the background image position to align perfectly next to the content area.

htmlcss

Answer №1

After analyzing the issue, I made some adjustments to the HTML by incorporating additional classes for backgrounds while still utilizing your w3.css framework. I eliminated the background-attachment:fixed; property and introduced no-repeat along with background-size to optimize the background.

I trust that these modifications will be beneficial to you.

#fill-left,
#content,
#fill-right {
  display: inline-block;
  width: 33%;
  height: 100px;
  padding: 0!important;
  position: relative;
}

.bg1 {
  vertical-align: top;
  z-index: -3;
  background-image: url("http://www.rachelgallen.com/images/purpleflowers.jpg");
  background-position: left top;
  background-repeat: no-repeat;
  //float:left;
}

.bg2 {
  vertical-align: top;
  z-index: -3;
  background-image: url("http://www.rachelgallen.com/images/yellowflowers.jpg");
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  float: right!important;
}

#main {
  width: 100%;
  height: 100%;
  z-index: 1;
  box-shadow: 0px 0px 100px #000;
}

#content {
  background-color: transparent!important;
  background-position: center top;
  z-index: 0;
}
p{
  text-align: center;
  color: #8B0000;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<div id="main" class="w3-row">
  <div id="fill-left" class="bg1 w3-col s1 m2 l3">&nbsp;</div>
  <div id="content" class="w3-container w3-white">
    <p>Lorem ipsum</p>
  </div>
  <div id="fill-right" class="bg2 w3-col s1 m2 l3">&nbsp;</div>
</div>

Answer №2

In order to improve the appearance of the content, I made some changes to the images and their placement. By adding background-size:contain; to both elements, the content now displays better. To ensure responsiveness, I suggest implementing a media query to hide these images when the menu disappears. Additionally, it seems that the menu items wrap excessively before disappearing. Just a heads up in case you missed that detail.

#fill-left {
    z-index: -1;
    background-image: url(bgright.jpg);
    background-size: contain;
    background-attachment: fixed;
    background-position: left;
}

#fill-right {
    z-index: -1;
    background-image: url(bgleft.jpg);
    background-size: contain;
    background-attachment: fixed;
    background-position: right;
}

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

Enhancing the functionality of localStorage

I am attempting to append a value to a key within the HTML5 localStorage. Take a look at my code below: var splice_string = []; splice_string += "Test value"; var original = JSON.parse(localStorage.getItem('product_1')); origina ...

javascriptjqueryhtmllocal-storage

Arranging th tags level and at equal height within a datable using HTML and CSS

I am looking to arrange my top headers in a table so that the red square icon is always next to the first span without using absolute positioning. Is there a way to achieve this without using absolute position? table.dataTable thead span.sort-icon { ...

htmlcsshtml-tabledatatablebootstrap-5

5 Distinctive Text Color Selection Classes in Bootstrap

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="https: ...

cssbootstrap-5

IE8 Image Links Not Working Without Chrome Frame Enabled

Upon visiting the website below, you'll notice a slideshow featured at the top of the homepage. Utilizing Nivo Slider, our client has brought to our attention that the links are not operational in IE8. The issue may be related to the "slide-overlay" ...

jquerycssnivo-slidergoogle-chrome-frame

execute a C++ application within a web browser using HTML

Recently, I created a captcha program using c++ and sfml. Now, I'm interested in running this program on an HTML page. Can anyone provide guidance on how to accomplish this? ...

c++htmlcaptcha

Ensure that the collapsing toggler and the textbox are aligned on the same line

As part of my project, I am developing a bootstrap5 website that features a search form. I am facing an issue where I am unable to align the form text box labeled "search by country" vertically on the same line as the collapsible hamburger toggler. I hav ...

htmlcssformsbootstrap-5

Video tag with centered image

For a current project, I am in need of rendering a centered image (a play button) at runtime on top of a video based on the UserAgent. If the userAgent is not Firefox, I want to display the image as Firefox has its own playEvent and button on top of the vi ...

javascripthtmlcssvideo

How can I retrieve the current page URL with Thymeleaf?

Trying to highlight the current element in the menu using Bootstrap and the "active" class, but unsure how to retrieve the value of the current page. Below is my navigation bar: <nav class="navbar navbar-expand-md sticky-top navbar-light bg-faded"> ...

cssbootstrap-4thymeleaf

Browsing through all text on songmeanings.com's HTML files

I am attempting to extract user comments from the HTML of a link using BeautifulSoup. The link in question is: However, I am facing an issue where only the user comments from the first page are being displayed when utilizing a specific code: import url ...

pythonhtmlbeautifulsoup

Acquire the information for PHP data updating

I'm currently working on a login system and data update feature that allows users to update their account information. To begin, please enter the login name of the account you wish to modify: UPDATEINPUT.HTML <html> <form method = "get" a ...

phphtmlmysql

Expanding using CSS3 to ensure it doesn't take up previous space

Currently, I am working on an animation for my web application. More specifically, I am looking to scale certain elements using CSS3 with the scaleY(0.5) property. These elements are arranged in a vertical list, and I want to ensure that they do not take u ...

javascripthtmlcss

Place a button at the center of a table

I am having trouble centering a button that I built inside a table. The CSS doesn't seem to be correct and I can't figure out why. I would appreciate any help with this issue. Additionally, the button needs to be displayed in an email, in case th ...

htmlcssemailbutton

Styling with CSS in Django templates

Having trouble with CSS in my Django template, My settings.py looks like this: BASE_DIR = os.path.abspath(os.path.dirname(__file__) + '/') STATIC_URL = BASE_DIR + '/static/' I have a folder called "static/css/home_css.css" in my path ...

cssdjangodjango-templatesdjango-staticfiles

Should the HTML inputs be positioned within the label or placed outside of it?

Check out this site for some on/off switches: <div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> <label class="onoffswitch-label" for="myonoffswitch"> < ...

csscheckboxlabel

Experiencing difficulties with positioning text beside an image

Hello everyone, I'm a first-time poster seeking some assistance. I'm currently tackling an assessment and am struggling with the final part. The task involves creating a picture card with an image at the top, a circular image to the side, and tex ...

htmlcssflexboxcss-grid

Dynamically add onClick events using JavaScript to perform multiple identical actions

While I can't provide all the code here, I believe this snippet can illustrate my issue: for(var i = 0 ; i < 5 ; i++) { $('#mybutton').on('click', function() { return false; }); $('#mybutton').on('click&apo ...

javascriptjqueryhtml

Updating a div's class upon clicking in React

This is my code: render() { return ( <div className='btndiv'> <button className='btn'>Hide</button> </div> ); } I'm trying to change the class of the div from .btndiv to .btndiv ...

cssreactjsevent-handlingreact-class-based-component

Height of list items in image gallery does not automatically readjust

I'm facing an issue regarding the height of an li element. Check out this CodePen link for reference. <div class="row fp-gallery"> <ul class="large-block-grid-4 medium-block-grid-4 small-block-grid-2"> <li> <a href= ...

jqueryhtmlcsszurb-foundation

Left-floating div moves to the bottom

My CSS is set up to float my divs next to each other, creating 3 rows and 3 columns as needed. However, I'm facing an issue where the first div in the second row is being pushed under the second column instead of the first one. It's quite puzzlin ...

htmlcss

Issue with Colspan in Nested Tables in Bootstrap 4.1.3

I'm dealing with an issue related to colspan within a nested table. I've tried various solutions, including wrapping the table in a div, but nothing seems to be working as expected. My goal is to have the nested table span across the entire width ...

htmlcssbootstrap-4