Web site

Hi

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

Thanks
SteptoeTeamAsked:
Who is Participating?
 
GreatGermCommented:
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).
0
 
level9wizardCommented:
Can you share some code?
What browser(s) are you zooming in/out with? Some web browsers have different zoom behavior.
0
 
SteptoeTeamAuthor Commented:
I am using Internet Explorer 9 and 8.

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

#contentcurves {
background:#FDF9E1;
width:780px;
margin:15px auto 1px auto;
padding: 0px 0px 50px 0px;
border: 1px solid;
border-color: #A98A47;
min-height: 485px;
background-image:url(media/tc-curves-big.gif);
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">
<br><br><br><br><br><br><br>
<p><img src="media/12.gif" alt="Map" width="122" height="123" align="left"></p>
</div>

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
image.gif
WebPage.pdf---Adobe-Acrobat-Pro.pdf
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
SteptoeTeamAuthor Commented:
Hi

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.

Thanks
0
 
GreatGermCommented:
I'm glad my suggestion to split the image up worked. If this is working for you, please mark this as answered.
0
 
Jason C. LevineNo oneCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.