Is there a simple way to create make the banner/header for the web portal stationray? I just can’t seem to find a large image that works for general use. What is the actual displayable area for the header? 200xp high, right?
Thanks.
The header area is 200 pixels high, yes.
You can never get a truly ‘stationary’ image because the width of the browser can vary. The appearance of your background image in a 3000x200 web browser will always be different than a 1000x200 web browser.
You can vary how the image adjusts itself to the browser width, though, using custom CSS style. See Web Configuration for how to set up custom CSS in Ares.
Default Configuration
The default configuration positions the banner using background-size: cover and background-position: center.
- Cover will either stretch or crop the image to make it cover the entire header area.
- Center always tries to keep the center of the image in view.
For example, if you look at the way BSGU’s image changes - this is the original image:
No matter what the browser size is, the browser will try to keep the center of the image (near the Cylon’s “jaw”) in view.
Stretching for Wide Browsers
If the browser is super-wide, you’ll see the full width of the image, but it’s so stretched that 200 pixels high only gives you a narrow band around the Cylon’s nose.
To understand why that happens - imagine if you doubled the size of the image in Photoshop and then took a 200 pixel high band across it, centered around the ‘center’ of the image.
Cropping for Narrow Browsers
If the browser is narrow, it can’t actually fit the whole width so it chops off the Cylon’s shoulder on the left and the extra red shadowy background on the right. You get the whole height, though.
Tweaking Background Properties
CSS has a ton of properties you can use to style the background differently.
For instance - if your image’s area of interest is in the top-left, you could set background-position: left top and it will always try to keep that part of the image in view.
You can also experiment with different background sizes, like ‘stretch’ or ‘contain’.
See the W3Schools tutorial for complete details about what background properties are available.
Hope that helps!
That’s a huge help! Thanks. 