 How to configure background image to adjust with browser window, Want background image to shrink with smaller windows |
  |
| Hooper |
 Mar 2 2015, 08:29 PM
Post
#1
|
|
Group: Members Posts: 5 Joined: 2-March 15 Member No.: 22,297  |
I have seen a page on a professional site where the background image for the whole page shrinks as the browser window width is reduced. With a typical configuration, the background image remains fixed, while the browser window width is reduced, simply showing less of the background image. I have tried configuring the background image in CSS3, and I have tried putting the background image in a <div id="container"> with a width configured as a percentage of the <body>, all with no success.
Here is the professional page: http://www.templatemonster.com/demo/44401.html How can I achieve the same effect? Thanks. Hooper |
  |
 
|
| Christian J |
Mar 2 2015, 09:24 PM
Post
#2
|
|
.  Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
You could use CSS3 "background-size" with the values "contain" or "cover" to get a smooth resizing: https://developer.mozilla.org/en-US/docs/We...background-size
Or you could use CSS3 media queries to display a few different background images depending on browser window widths: https://developer.mozilla.org/en-US/docs/We...S/Media_queries (the linked page seems to use something like that). If bandwidth or speed is an issue, you may combine the two methods, that way users with small browser windows get smooth background image resizing without having to download large image files unnecessarily. |
|
|
|
| Hooper |
Mar 5 2015, 08:45 PM
Post
#3
|
|
Group: Members Posts: 5 Joined: 2-March 15 Member No.: 22,297 |
QUOTE(Christian J @ Mar 2 2015, 06:24 PM)  You could use CSS3 "background-size" with the values "contain" or "cover" to get a smooth resizing: https://developer.mozilla.org/en-US/docs/We...background-size Or you could use CSS3 media queries to display a few different background images depending on browser window widths: https://developer.mozilla.org/en-US/docs/We...S/Media_queries (the linked page seems to use something like that). If bandwidth or speed is an issue, you may combine the two methods, that way users with small browser windows get smooth background image resizing without having to download large image files unnecessarily. Thanks, that was perfect!  |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 18th April 2024 - 11:56 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC