Home/ Questions/Q 7705729
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T23:56:03+00:00

I’ve never dealt with a website like this before, but here’s what I’m trying

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0