Background image sizing
hjones51 said 1 year ago:
Newbie here. Need help sizing background image to fill screen. And is there an option that allows the image to fill the screen no matter what size monitor resolution?
Gary A said 1 year ago:
@hjones51
When adding a background image, you can choose the Scale option. This will cause the image to fill the entire background regardless of screen size. Information on working with background images can be found in this article:
http://support.godaddy.com/help/6589/managing-background-images-in-website-tonight
-Gary
hjones51 said 1 year ago:
When I choose “Scale” for my b’ground image and then “Page Preview”, the b’ground image is cut off at the top and bottom. What am I missing?
[Thanks for your time, Gary. I'm new to the Forum. Is there email notification when a response occurs to a topic I post?]
Nate D said 1 year ago:
@hjones51 – There is a “Subscribe to Topic” button in the top right corner of the body of this page.
“Scale” will fill the screen, but monitors have different ratios of height v width (for example 16×9). So if the image is a different shape than that of the image it would cut off the ‘overflow’.
hjones51 said 1 year ago:
Is there a solution to this? I’m just a beginner, but last year I designed a website in Dream Weaver and I recall an option that allowed the window to be resized without cropping any of the page content. The content would resize down or up with the window. Or am I dreaming? ![]()
Nate D said 1 year ago:
@hjones51 – There is no one way to fix this 100%. If you can post the web address where this is happening, it may possibly be adjusted with CSS.
Remember though if the image and screen have a different height v width ratio then the image would either need to be clipped or distorted to fill the screen.
Gary A said 1 year ago:
@hjones51
The best way I found to have the image fill the background without any cropping requires some unique settings. When editing the Background Image, I set the Position to “Normal” and the Image Align to “Top Left”. I then added the following custom CSS:
#ss-background {
height:105%;
width:100%;
}
This is probably not a perfect way to do this. You should also keep in mind that this will cause the image to stretch. If you are not familiar with how to add Custom CSS to WebSite Tonight, this article explains how to add it:
http://support.godaddy.com/help/article/4229
-Gary
2 min expected wait time