I am trying to position a background image of sun rays extending to the edge of the browser window. The center of the sun rays must appear directly underneath the logo image, which appears in the top-left corner of the container div. The container is centered, so the background image and logo image should keep relative position when the browser is resized.
I have tried using percentages for background-position: % %; but it doesn't resize well. I've tried using a very large image that doesn't need stretching, but had poor success wit bg-pos: % %, and additionally had to create a 700kb image (image is transparent png overlay). I've been fiddling with combinations of the below with no great success. The images aren't ever "locked" to each other.
body {
background: url(image.png);
background-position: % % | center;
background-size: cover|contain|% %;
background-attachment: fixed|scroll;
}
To recap:
- background image must cover / stretch / extend past entire browser window
- center of sun rays must appear directly underneath logo
- must appear underneath logo when browser window is resized <-- This is the hard part
Thanks!