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