Background image left and right

Posted on 2012-09-04
Last Modified: 2012-09-10
Im wondering if its possible to set a background image for both left and right, so like:-
Ive got the left and right images set to 1px high, and thought I could code it like:-
<body style="background: url(Left.png) repeat-y left top; background: url(Right.png) repeat-y right top;">


Open in new window

But I only get the last background image (so in this case the right image), it just ignores the left so Im assuming its overwritten.

Any ideas how I can get this working?

Thank you
Question by:tonelm54
    LVL 17

    Expert Comment

    You could create two vertical container divs and have one image in each side. Are you using a fixed width? In that case, why wouldn't you make this image one wide image that is 1 pixel tall?
    LVL 17

    Expert Comment

    BTW, if you use the background property twice, browsers will only obey the last one.

    Author Comment

    What I was trying to do was have a variable page width with a fixed div in the middle.

    Suppose what I can do is set 2 divs 50% width and a absolute position fixed div.
    LVL 17

    Expert Comment

    That wouldn't work because the background images would only be in the outside divs, how wide are these two images? If you put the content in the center, the two outside divs would be pretty narrow, right?
    LVL 17

    Accepted Solution

    I go back and forth with fixed versus variable width of websites! It's so hard to choose.  Maybe you would be better off setting a minimum width and then 25%, 50%, 25%? The most pleasing proportion to the human eye is 1.6 to 1, although I suppose that doesn't apply to three columns.
    LVL 42

    Expert Comment

    by:Chris Stanyon
    You could do this with 2 divs, overlaying one another. Give the bottom one the left background and background colour (wrapper1) and the top one the right background and transparent.

    <div id="wrapper1">
    <div id="wrapper2">
    //All of your content goes in here.

    #wrapper1 { background: url(left.png) repeat-y left top white; }
    #wrapper2 { background: url(right.png) repeat-y right top transparent; }

    Just make sure your backround image (particularly right.png) isn't too wide, otherwise you will see it overlay the left.png)

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Suggested Solutions

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now