...

View Full Version : Over-sized Background Image



movick
02-05-2012, 06:30 PM
Hello,

I am a somewhat new WYSIWYG designer. I would like to use a single over-sized background image of 1800px (wide), which I'd like centered at all times, never resizing, repeating or causing a horizontal scroll bar to appear in the browser as it now does.

Basically, the browser's view port should display only the monitor’s resolution width without rescaling the image, e.g. browser’s view port is 1200px wide: it displays the center 1200px of the 1800 background image without rescaling or generating a horizontal scroll bar; the 600 remaining pixels (300 per side) extend (theoretically) beyond the view port without distortion. I hope my description makes sense.

Over the top of the background image I would like to have my tabled content always appear centered to the background image. Here is a link to to the mock-up page:

http://scottiedtv.com/mockup1.htm

Here is a link to how I'd like the background image to display at different resolution (hopefully it will clarify my description):
http://scottiedtv.com/screens.htm

I would like the entire page including the background to scroll together.

Thanks so much for your greatly appreciated assistance in advance!!!

Movick

dylanbaumannn
02-05-2012, 09:09 PM
you'll want to check out something called Supersized.js which you can find here (http://buildinternet.com/project/supersized/).

movick
02-05-2012, 11:29 PM
Thanks, but that appears to be a full screen slide show script. I know there is a way to to what I need in CSS.

Arbitrator
02-06-2012, 06:34 AM
I would like to use a single over-sized background image of 1800px (wide), which I'd like centered at all times, never resizing, repeating or causing a horizontal scroll bar to appear in the browser as it now does.Assuming that "centered at all times" means centered horizontally only, the relevant CSS declarations are:


background-color: crimson; /* used before image load or as fallback on load failure */
background-image: url("/images/fireback.jpg");
background-position: top; /* or longhand: |background-position: center top;| */
background-repeat: no-repeat;

This might result in code like (using the background shorthand property):


html { background: crimson url("/images/fireback.jpg") top no-repeat; }


Over the top of the background image I would like to have my tabled content always appear centered to the background image. Here is a link to to the mock-up page:To center a block-level element such as a table element (with display: table;) horizontally, you need to set both the left- and right-hand margins to auto:


table { margin-left: auto; margin-right: auto; }


I would like the entire page including the background to scroll together.This is the default behavior (described by background-attachment: scroll;).

movick
02-06-2012, 08:26 AM
http://scottiedtv.com/mockup1z.htm

The background image doesn't show up at all in IE- only the crimson color.

Thanks for hopefully getting me started in the right direction.

Arbitrator
02-06-2012, 09:06 AM
The background image doesn't show up at all in IE- only the crimson color.It's displaying for me in IE9.


<div align=table { margin-left: auto; margin-right: auto; }>This code is not correct. You were supposed to copy the CSS into your style sheet, not paste it into an HTML align attribute.

movick
02-06-2012, 11:02 AM
Something was odd, but it now appears in IE. Is this correct now?

Arbitrator
02-07-2012, 06:10 AM
Something was odd, but it now appears in IE. Is this correct now?Given that you removed the code that prevented background-repeating and the code that was centering your background image, I would assume that it isn't. Your image is noticeably left-aligned on my screen and repeats (the default behaviors).

table { margin-left: auto; margin-right: auto; }, CSS which is meant to center your table element, is supposed to go within the style element (i.e., between the <style> and </style> tags). You're already using the (invalid) align="center" attribute to do this though, so I guess it's a moot point. (The aforementioned CSS method is the correct way to center block-level elements.)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum