Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Background-position relative to document not element?

Tags:

html

css

I'm wondering if this is possible, the ability to set the background position of an image to the top left of the html document, not the top left of the element it's the background of.

Psuedo-code

body {
    background-image: url(someurlhere);
    background-position: top left;
}
element {
    background-image: url(sameurlhere);
    background-position: top left /*Relative to body not element*/;
}

If I need to provide anything else to this question let me know and I'll amend it, but I'm sure it's pretty straight forward.

Edit: I can't use absolute positioning, I'm loading dynamic content and I want a tiled image to fit the background of several elements to make the illusion of holes in the page.

Edit 2: Here are some pictures to better explain the problem.

Picture 1: Notice the repeated pattern in the header elements. https://i.sstatic.net/O87Gf.png

Picture 2:This variation is what I aim to achieve. https://i.sstatic.net/leBPg.png

like image 424
Andrew Fairbairn Avatar asked Nov 22 '25 15:11

Andrew Fairbairn


1 Answers

The first question would be why you are not just setting the background image on the body element.

But if that's not appropriate, you have the option to set a background image on an element to fixed, in which case it will be fixed to the top left of the browser window and won't scroll.

element {background: url(image.fig) repeat fixed;}

However, the background will only show on the element it's attached to, even though it starts at the top left corner of the screen. (This is handy for parallax effects.)

EDIT: As a side note, if you are using the longhand background properties, fixed is set with

background-attachment: fixed;
like image 179
ralph.m Avatar answered Nov 24 '25 05:11

ralph.m



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!