Full-size background image
Permalink Browser Info Environment
I have made my background image 1440 x 900 pixels. I would like my background image to display full height and width. How do I accomplish this? The problem is that when my browser panel is expanded fully, the image cuts off at bottom. When I pull the panel in, the image displays more fully. I am trying to make this occur on only one slide.
I tried adding the css you suggested to make the image full height but it caused a border on the sides of the images to appear.
Thank you.
I tried adding the css you suggested to make the image full height but it caused a border on the sides of the images to appear.
Thank you.
| Type: | Discussion |
|---|---|
| Status: | New |
Please note that, as stated in the documentation, "images might be cut off depending on the screen resolution (there are lots of screen resolutions and it's impossible to get the background to fit the same way on all computer screens)."
If the image is not the exact same proportion as the screen, basically there are two possibilites:
A) the images has to be cut off to fill the screen (which is the default behaviour for the theme)
B) if you want the image to be full height, it will not be cut off vertically. But if the image is not wide enough, obviously it will not fill the screen horizontally (you'll get a blank space on the sides).
(If you are interested, you can have a look at this page, there are some pics showing what I mean:http://stackoverflow.com/a/9265035)...
So, is it possible to have the image display at full height and width, without being cut off? Well, I can only think of two possible solutions:
1. One way would be to make sure the image is the same proportion as your screen. Obsviuosly this will not work if you resize your browser or use a computer with a different screen resolution.
2. Another way would be to force the image to display at full height and width with the following code:
However, this will not preserve the image aspect ratio, so I would not recommend this, but you can test it and see if it works for you...
The approach most developers take is to use background images that will look good even being cut off, for instance images with a centered element and a blurred background or color that extends to the edges.
Sorry for the lengthy answer :)
Jordi