Home/ Questions/Q 8807365
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T02:21:05+00:00

I have two parts to my background: a repeated pattern, and a fixed image

  • 0

I have two parts to my background: a repeated pattern, and a fixed image in the center – done like so:

body {
    background: url('http://www.bathroomsandkitchenstoo.com/BK/home_files/Tile_background2.jpg');
}
#center {
    position: fixed;
    height: 100%;
    width: 100%;
    background: transparent url('http://www.cadenhead.org/workbench/gems/floating-head-of-canterbury.jpg') no-repeat center center;
}
​
<body>
    <div id="center">&nbsp;</div>
    <div><!-- page content, br's here as example to show how #center is "fixed" --><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
</body>

See jsfiddle.net/Ps9JV.

What I’m trying to do is keep the fixed image central, but mask it to a 300px x 300px square in the top left of the body, like below. Is there any cross browser way to do this without javascript?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s possible with calc, see here

    body {
    background: url('http://www.bathroomsandkitchenstoo.com/BK/home_files/Tile_background2.jpg');
}
#c {
    position:fixed;
    width:100%;
    height:100%;
    margin: 50%;
}
#center {
    /* image is 450px x 300px */
    width: -moz-calc(525px - 50%);
    width: -webkit-calc(525px - 50%);
    width: -o-calc(525px - 50%);
    width: calc(525px - 50%);
    height: -moz-calc(450px - 50%);
    height: -webkit-calc(450px - 50%);
    height: -o-calc(450px - 50%);
    height: calc(450px - 50%);
    margin-top: -150px;
    margin-left: -225px;
    background: transparent url('http://www.cadenhead.org/workbench/gems/floating-head-of-canterbury.jpg') no-repeat top left;
}
    • 0