CODEWITHSUNDEEP
htmlcss
Charlie
Charlie

Reputation: 11777

Viewport of background image centered?

I've never dealt with a website like this before, but here's what I'm trying to accomplish...

I have one large image (1000px x 1000px) which I want to use for the background image. The content itself only takes up around 500px x 500px, and It needs to be on the same position all the time relative to the background image.

This is complicated to describe, so I'll make a picture:

enter image description here

This itself doesn't seem like it would be that hard, but what if the browser is larger than my 11" screen? If the browser is too big for the background image, I'd like a simple color to show.

The other problem I see is keeping it centered at all time with scroll bars not appearing as they should only appear if the browser window is smaller than the content box.

I'll be happy to clarify more, as I'm having trouble putting into words what I'm trying to accomplish.

Upvotes: 2

Views: 3882

Answers (2)

Jörn Berkefeld
Jörn Berkefeld

Reputation: 2579

use CSS:

HTML{ width:100%; height:100%; 
      background:#F00 url(path/to/your/image.jpg) center center no-repeat;
      background-attachment: fixed;
      background-size:100% auto;
}

background sums up background-color, background-image, background-position and background-repeat (in that order). The other two currently cannot be included in background (though the W3C spec says otherwise).

background-attachment:fixed is like position:fixed for layers and will assure that the image stays visible regardless of how the user scrolls. if you don't want that, wrap a container around your content and assign the above declaration to it instead of to the HTML-node

background-size scales the image into your background play with the value a bit - what I proposed here will scale the image to fit to the width of the viewport. 100% 100% will stretch it to always cover the entire viewport and auto 100% will scale it to fit into the height of the viewport. In both cases that use auto some clipping might occur - or the background-color (I chose red) will show on the sides/top&bottom

giving the HTML-node width:100%;height:100% makes sure you don't have a white border on the bottom if your content does not fill the screen

Upvotes: 4

Qtax
Qtax

Reputation: 33908

Not clear what problems you are having. Here is an example of what you might want to do: http://jsfiddle.net/mhgdZ/

Upvotes: 3

Related Questions