Hi guys
I want a page which shows divs fade in as the user scrolls down the page. The divs need to show relative to a background image. But Ill have to position these divs absolutely so they appear over the background image. This means that the page isnt responsive.
Has anyone else had this issue? Is there a possible fix for this?
Thanks
Did you place the divs absolutely using percentages and percentage width and heights?
We’d need to see the page to give a full answer.
Hi @PaulOB . Ive positioned absolutely using px. I tried using percentages but still ran into difficulties. This is the page Im working on http://mamhead.com/dev/ . Its a bit of a mess when you resize the browser. 
First thing you need to do is make the image responsive and fit its container. At the moment it is sticking right out the right side of the col-md-12 container.
Remove the max-width from #image and then add a class to the first image (the background.jpg) and set that image to width:100% and height auto. I would set that image to position:absolute and then you don’t have to absolutely position all the other divs as you can use margins or grid perhaps to set them out.
There will be trade offs as obviously as the image gets smaller your text will also need to get smaller so that it still aligns properly. I suppose the first question to ask is exactly where do all those text boxes have to be placed. At the moment I don’t see any logic to them other than that they are offset across the image.
If you clarify what you want to happen then we can work towards something more responsive although I think you may need a smaller image for mobile if the text needs to stay in sync with a specific item on the image.
Next you will need to size the text images in percentages. As the max-width is 1170px of that column you will need to change each image’s width into a percentage. e.g. divide the image width by 1170 to get a percentage. Your “Food Markets and global trade” image would be 25% approx and height :auto".
As all the images are different sizes you will need to work them all out.
Then use top and left to place the images but both must be in percentages, Work it out on the wide screen and then they should scale smaller.
Obviously once you get down to about 800px screen width the text boxes will start to look small so you may need to change to a different image or tweak the positions a bit.
This is great @PaulOB ! I have a couple of days off but Ill have a play with it based on your suggestions and Ill post an update on here in a few days. Cheers!
@PaulOB : Ive just amended the code and its working much better! Thanks!! http://mamhead.com/dev/
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.