how to make uniform background image position in diff browsers
-
I used an image there on my site, and sized it so that it lined up perfectly in mozilla on my screen. then i checked IE and it shifted a little, but i could deal with it.
then on my friends mac, in safari, the image stacked up with the text, which will not work for me. whats the best way to have image work (meaning, not run under text ) in every browser? i dont have access to the css now. would there be a way there somehow?
thanks pros.The blog I need help with is: (visible only to logged in users)
-
There have been others posting with IE display issues as well. See here > https://en.forums.wordpress.com/tags/ie-display-issue
Please contact Staff and report the issue to them. http://en.support.wordpress.com/contact/ -
its actually not IE that was the main problem. If you reread my post, i say , yes there was a change in IE, but it was livable. What did NOT work for me was seeing the image in Safari, on a mac.
these other issues are not helpful for me atm. this is not what im asking for support with. thanks -
I’m sorry I got that wrong. Thanks for straightening this out. I don’t have any help to offer you but I do hope another Volunteer will.
-
-
to be more clear, i would like to format the background image so that it never overlaps (or underlaps behind) the main body of the content in this theme. I want the image to only be on the side, and if a window is made smaller in size then it would require the viewer to scroll over, the image would never collide behind the text. make sense?
thanks for your ideas! -
Resize the browser window width in any browser and see what happens. Notice that the content stays centered within the browser window? The background image will aways stay fixed at the left the way you have it.
If you look at your main page while logged into wordpress, the image top aligns with the bottom border line below the navigation. If you look at it when logged out, it appears that the image shifts down, but in actuality, it is the content shifting up and down to accommodate the grey admin bar at the top when logged in.
To fix the horizontal placement issue, you have to fix the content area on the left so that it does not move when the browser window is at different widths. I’ve just used 200px as a placeholder and you will need to adjust it to get the relationship between the content and the image the way you want it. Do note that this effectively increases the visible width of your theme by whatever left margin you use because the content can no longer slide all the way to the left of the browser window.
.center-column { margin: 0 auto 0 200px; }As far as keeping the image in relationship to the rest of the content (aligned with the bottom border of the navigation) that is a little tricky. The image really needs to be placed in .center-column instead of body and then it will retain relationship with the rest of the content. The problem is it takes a ton of adjustments to a bunch of stuff to get it right.
-
Just a suggestion, but putting the image to the left of everything will effectively make you theme nearly 1200px wide, and a good portion of people are still on 1024px wide monitor resolutions. What is going to get cut off is the right side of your content (unless you float the whole thing to the right margin (which is weird). Horizontal scrolling is one of the top 10 things people dislike most on the web.
Just sayin.
-
I should have asked up front. Do you have the CSS upgrade and some CSS experience?
If not, what you want to do cannot be done with Wu Wei.
- The topic ‘how to make uniform background image position in diff browsers’ is closed to new replies.
WordPress.com Forums 