Web site

Posted on 2011-10-24
Last Modified: 2012-05-12

I have the same background image set for my web pages -the background image consists of couple of red lines and a small circle.  I would like to keep the background image as other pages are still using this

I then added 5 different images (for 5 different web pages) over the small circle, when I zoom out of the web page it moves the images up or down, which results in two circles.  The background image and the 5 different images - is there a way if a user zooms out or zooms in the image follows the background image when zoomed

Question by:SteptoeTeam
    LVL 11

    Expert Comment

    Can you share some code?
    What browser(s) are you zooming in/out with? Some web browsers have different zoom behavior.

    Author Comment

    I am using Internet Explorer 9 and 8.

    Zooming is affecting both broswers,  the code - this is for the background image:

    #contentcurves {
    margin:15px auto 1px auto;
    padding: 0px 0px 50px 0px;
    border: 1px solid;
    border-color: #A98A47;
    min-height: 485px;
    background-position: bottom right;
    background-repeat: no-repeat;

    I then insert an image for each web page using the following code

    <!-- third column -->
    <div id="column3">
    <p><img src="media/12.gif" alt="Map" width="122" height="123" align="left"></p>

    I have also attached one of the pages and the static background image.  As you can see I am trying to replace the background circle from the web pages.  So ideally if someone zooms out the image (circle) will stay where the background circle is
    LVL 17

    Accepted Solution

    There really isn't a good way to do this with your background image. The best you can hope for is to try to catch the zoom event with javascript and calculate the positioning of the front image, but this is not likely to be pixel perfect on all (or even most) browsers and is not detected if the page is loaded while already zoomed in.

    Your best bet is to create the viewable image on the fly, either by splitting it up into different tags or building it server side based on screen information and delivering it to the client side (depending on language used, this might require ajax).

    Author Comment


    I used a static background (without the circle) for each of the pages and inserted a seperate circle graphic for each of the pages.  This allowed me to zoom in and out without it moving, since the main background image no longer contained a circle this worked.

    LVL 17

    Expert Comment

    I'm glad my suggestion to split the image up worked. If this is working for you, please mark this as answered.
    LVL 70

    Expert Comment

    by:Jason C. Levine
    This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Suggested Solutions

    Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    The viewer will learn how to count occurrences of each item in an array.
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    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