No replies
pepsymax
pepsymax's picture
Offline
newbie
Last seen: 11 years 37 weeks ago
Joined: 2011-03-14
Posts: 1
Points: 2

Firstly I’ll start by saying that I’m not very good at all this stuff, so if you’re kind enough to reply, and even if something seems obvious, I’d be very grateful if you could put it all in your reply.

I have a web page which has an image (let’s call it image A) that is 1345x1000px, and is styled to naturally resize to fill the page horizontally. It works like a background image but has the advantage of resizing in all browsers and resolutions. I didn’t write the code, but found it online. It seems to work well in all browsers, but thought that I would mention it first as it may conflict with what I’m trying to achieve.

On top of that div I want to place an oversized image (image B) 2800x658px in a div, but I want to center it horizontally and vertically. I also want it to act in a similar way to a background image by it not activating horizontal and vertical scrollbars. This way those with larger resolutions will see more of this image B, whilst image A will naturally rescale fill the browser window no matter what their resolution.

I read that one method of helping me to achieve this would be by disabling the scrollbars for the page.

body {
overflow-x: hidden;
overflow-y: hidden;
}

The problem with this however is that the main content of the site will be 960px, and those with 600x800 resolutions wont be able to scroll if the scrollbars are deactivated for the whole page.

As I’m not really good at this some of what I said might not make sense. So please let me know if I should explain more.

Here is the code for the page, I want to center image B without it creating horizontal or vertical scroll bars.

Thanks


My Page


html,body{margin:0;padding:0;width:100%;height:100%;background-color:#000000}
#bg_image{position:fixed;top:0;left:0;z-index:1;width:100%;height:auto}
#scrollable{position:absolute;width:100%;height:100%;top:0;left:0;z-index:2}
#imageB {
	position:absolute;
	left:22px;
	top:62px;
	width:2800px;
	height:658px;
	z-index:3;
}



<div id="imageB"><img src="imageb.gif" width="2800" height="658" /></div>
<div><img src="imagea.jpg" alt="" name="bg_image" width="1345" height="1000" id="bg_image" title="" /></div>
<div id="scrollable">
</div>