Arrangement of divs to showcase Background images

Apologies in advance for any errors in my code or question, as I am still learning about coding. Please forgive the spacing in links and lack of correct use of characters - < - I'm having some trouble posting code :)

I am working on a website called http:// second to nature .co.uk/en/ where I am attempting to add ivy background images on both sides of the site. This website is built using Prestashop.

I initially tried achieving this effect using CSS, but it did not work on older versions of Internet Explorer (6-8) due to their lack of support for CSS3.

background:url(http:// second to nature.co.uk/img/backgroundleft.jpg) top left fixed
no-repeat, url(http:// second to nature.co.uk/img/backgroundright.jpg) top right fixed no-repeat;

After conducting some research, I decided to try using two separate divs to create the desired effect:

<div id="container">
  <div id="inner-container">
  </div>
</div>

Below is the CSS code that I used to implement this setup. However, when you visit the site, you'll notice that the image on the right side does not appear.

#container {
    background: url(http:// second to nature.co.uk/img/backgroundleft.jpg) repeat-y;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 130px;
    height: 1000px;
}
#inner-container {
    background: transparent url(http:// second to nature.co.uk/img/backgroundright.jpg)) repeat-y;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 130px;
    height: 1000px;
}

If anyone can spot my mistake or provide a solution, I would greatly appreciate the help. Thank you!

Best regards

Answer №1

There seems to be a small error in your CSS:

url(http://example.com/images/background.jpg))

You have an extra ) at the end of the URL that needs to be removed.

In addition, it appears that your HTML structure is not optimal. It would be better to move all meta tags and asset links from within the body element to the head section for improved organization.

A recommended approach would be to wrap your content in two divs, each set to 100% width by default, and apply background images to these divs for a cleaner layout.

Answer №2

Consider implementing Modernizr to utilize CSS3 border image, allowing it to display in older browsers like IE6, 7, and 8.

It's unfortunate that you still have to consider IE6 users, as it is known for being a problematic, buggy, and insecure browser.

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

Column-count can result in the flex div dividing the element into two parts

Whenever I utilize column-count with nested divs that have display: flex set, I encounter a problem where elements are cut in half. The suggestion from this answer is to use display: inline-block to prevent this issue. However, when I implement that soluti ...

Angular binding for selecting all data

Upon checking a checkbox for a single item, the bound data is retrieved and added to an array. However, this does not happen when using selectAll. Code snippet in Angular for obtaining the object of a checked item: $scope.selectedOrganisations = []; $sco ...

Implement a collapsible navbar using bootstrap

To create a responsive navbar that collapses into a burger menu when clicked, you can use the following HTML structure: <body> <header id="nav-wrapper"> <img id="logo" src="images/event-logo.png" /> <nav class="n ...

A helpful tip for dynamically adjusting the canvas size is to utilize its height and width attributes to resize it whenever it undergoes a change

I am encountering an issue with the canvas element in my code. The canvas is supposed to update whenever its containing div is resized. window.addEventListener('resize',function() { let mapwidth = $('.canvas').attr("width") l ...

What is the process for setting the active state for HtmlBodyElement?

I attempted to use the following method: document.querySelector('body').setActive(); However, I encountered an error: TS2339: Property 'setActive' does not exist on type 'HTMLBodyElement'. Any suggestions on how to resolve t ...

Pedaling back and forth along a sequence

Is there a way to implement forward and backward buttons for a clickable list without using arrays, as the list will be expanding over time? I have already achieved changing color of the listed items to red, but need a solution to navigate through the list ...

My HTML Won't Recognize the CSS File

Despite trying various paths and browsers, I am unable to link my CSS file to my HTML file. When inspecting the page elements and checking under resources, the CSS file does not appear. Here is a snippet of my HTML: <html> <head> <meta ...

The issue of the background image not expanding to cover the entire page when resized is problematic

Hello there, I'm currently working on making my website responsive and I've run into a problem with GIF images. No matter what I do, they just won't fill the entire page. When I try to make them smaller, it leaves white spaces at the top and ...

Inheritance of currentColor in SVG URLs

Seeking the same solution as mentioned in How can an SVG image inherit colors from the HTML document?, specifically when applied to an svg image used as content on a :before pseudo-element. (The intended outcome is for both checkmarks to adopt the red col ...

Alignment problem with email signatures on MAC devices

Recently, I designed a straightforward email signature and successfully copied and pasted it into the appropriate section. However, while it works perfectly in Outlook, there is an issue with MAC Mail (Version 7.3) where the image extends beyond the table. ...

Tips for organizing a div into a dock panel

I am seeking guidance on how to align and resize the following divs based on my specific requirements outlined below. Area A Area A should remain at the top with a set height that will not change. Area B The height of Area B should vary between 0 and a m ...

Center elements at % on the webpage using CSS styling

When creating two bars at 70% and 100%, I also want a small triangular shape to point specifically at the 70% mark. Here is how I am currently drawing the triangle: .arrowUp { width: 0; height: 0; border-left: 10px solid transparent; border-right ...

Display Loading Spinner with Bootstrap on Form Submission

This Django project features a Bootstrap spinner within a button, as seen in the code snippet below: <form method="POST" id="pdfUploadForm" enctype="multipart/form-data"> {% csrf_token %} {{ form|crispy }} <b ...

Struggling with the alignment of pictures inside a container

I utilized the Instafeed.js library to fetch the three most recent images from an Instagram account. These images are loaded into a specific div and I successfully customized their styling according to my requirements. However, the current setup is quite s ...

Ensure that the text is wrapped properly when implementing innerHTML functionality

Within my Angular 5 application, I am faced with a requirement to display HTML content retrieved from a database. An example of the text stored in the database is: <div><u>Documents and Files</u></div><ul><li>These docu ...

Steps for creating a rubber compound with reduced elements

Sample Image Looking for a way to reduce the size of elements on a webpage without adapting them? I want the elements to shrink and align in a single column, and I will handle the adaptation myself. HTML: <!-- Trading --> <div class="main-co ...

What is the best sequence for loading angularjs, bootstrap, sp js libraries, and jquery?

I have a unique single application that requires the use of bootstrap, ui bootstrap, angularjs, and jquery. The functionality of the button below is working correctly, but I am experiencing issues with the styling. You can check out a sample of alerts here ...

Align bootstrap button to the center on xs screens

I've spent countless hours on this issue - I just can't seem to get the button centered properly in xs mode. It keeps aligning itself based on the left side, no matter what I try. I've searched through Bootstrap but couldn't find a clea ...

Unusual default Nav bar positioning

When attempting to create a navbar, I encountered small gaps that seemed impossible to close. Adjusting margins only resulted in new gaps appearing on the opposite side. Even when trying to find a compromise, I ended up with gaps on both sides instead. It ...

The iteration count and stop code in CSS are failing to function correctly

Is there a way to make this loop once and then stay as is unless the page is refreshed? I've tried multiple methods I came across. Can you modify the code so I can see where the changes are being made? The goal is to have it display once and then per ...