SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: Background image size
-
Nov 25, 2009, 21:49 #1
Background image size
Hello, I'm currently on a project where in my client wants a background image that will span 100% on all screen resolutions. The main content will be a div 1024px width centered on the browser.
css:
body{
background-image: url(/images/myBackground.jpg);
background-position: center
}
#content{
width:1024px;
margin-left:auto;
margin-right:auto;
Question:
what will be the size of my background image more particularly the width? I started with 1600px X 1000px do you think the size is enough? Or I'll make it bigger?Don't Panic
-
Nov 25, 2009, 22:23 #2
- Join Date
- Mar 2009
- Location
- Melbourne, AU
- Posts
- 24,338
- Mentioned
- 465 Post(s)
- Tagged
- 8 Thread(s)
-
Nov 25, 2009, 23:09 #3
- Join Date
- Nov 2008
- Posts
- 625
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
also keep in mind that background images dont scale.
so it depends on the kind of background image you are using.
different screen resolutions will show different part of the big background image.
vineet
-
Nov 25, 2009, 23:27 #4
- Join Date
- Feb 2009
- Location
- England, UK
- Posts
- 8,111
- Mentioned
- 0 Post(s)
- Tagged
- 1 Thread(s)
I would also be careful about sizing, heavy background images often take a long time to load which can be very problematic for designs which are loading on slow Internet connections, generally I would advise ensuring the background image is no larger than 200KB (that seems to be the benchmark average for most "big background" designs). When CSS3 comes along things will be much better because we will be able to scale backgrounds by assigning width and height values to them (so we will be able to scale 100% of the screen) but that's not really something we can rely on as there is little browser support.
Bookmarks