i am learning web designing this days and come across the following problem, it will be my pleasure if you can solve it.
While designing a site i placed an image in background it looks nice on my system but on other big screens image looks small and shows white space around it so all that i want to know is what size of image i should select and what properties of css i need to apply?
for more infomation i am using 15" computer screen n problem occurs when i view my site on 17" system.
Waiting for your reply.
Your 15" screen is probably running 1024x768 resolution which is fairly small compared to the most common monitor sizes you will come across. I did a quick check in Google analytics for the most popular browser sizes wider than 1024x768 and came up with these common sizes -
1280x800 (typical widescreen 15" laptop)
1366x768
1280x1024 (typical q7" and 19" monitor)
1440x900
1680x1050
What I usually do is select a pretty large image, then do a radial gradient fade to the background color. Depending on the complexity of the image, I will often use an image that is 1600px wide so that it covers all but the very largest screen resolutions. Then place the image centered at the top of the page. Here is the CSS -
BODY{background:URL(image/url/goes/here.jpg) center top no-repeat;}
With a little practice you should be able to make the image blend in to the background nicely so it looks good on very large screens as well.
Related
I'm new to the world of web design and I've started with HTML and CSS. I've begun by building my own website from scratch and I'm currently stumped with how the design scales across different platforms.
When viewing my website on an iPhone 7, which is listed online as having a resolution of 750 x 1334, my inline-block images are able to sit next to one another in rows of 2. I don't understand how this is possible when they are set to have a height and width of 400px. I've attached a developer screenshot from chrome dev tools to show further. Developer tools showing the issue
Do I have a misunderstanding of how iPhones display content? If the maximum width resolution is 750px (and only 375px according to chrome dev tool...) how is it able to display 2 400px images side by side?
iPhones have "Retina display" which have a higher screen resolution than the "logical" resolution that you see in dev tools.
The image (content of the whole screen) is first rasterized, after that downsampled to the screen resolution and then displayed on the physical screen.
For the iPhone 7 model (and 6 and 8) scale factor is 2.
These models have screen resolution of 750x1334 and logical resolution of 375x667.
You can find resolutions for other models here and more details here.
As for the 2 images with width of 400px displaying on the 375px with screen side by side seems like a viewport zoom "issue".
The of the html is not visible on the screenshot, but the "jumbotron" class on the suggests that you used bootstrap. Perhaps you have unintentionally set the viewport when you where setting up bootstrap.
My page has a width of 1920px on the body element. My 15" Macbook Pro supposedly has a resolution of 2880x1800. Why do I need to zoom out to see the entire page?
The pixel density of many modern screens is very high. If you viewed content intended for more traditional screens on them using native pixel resolution, you would end up with pin sharp text that was too small for most people to read.
Macbook Retina displays are, by default, scaled so software treats them as having a resolution of 1440x900. This means that 10px high text (for instance) uses 20 physical pixels and is still large enough to read, but is sharper than it would be on a screen with 1440x900 physical pixels.
I am using fullpage.js to create parallax website, however I am thinking of the ideal image size that I can use for background image in every section.
If the image is too big it will cost more loading time, but when the image is so small it might sacrifice the quality of the images, so I am looking for the ideal image size.
You can make use of CSS 3 media queries to load one or another background image depending on the resolution of the viewport.
This will help a lot when loading the site in mobile devices and won't load huge images for small laptops.
Additionally you can load the backgrounds dynamically using this lazy load technique. This way you won't load images in sections which are not visible.
You can use images based on ratio 16:9 which is usuall 1.777 Units to 1 unit. a very good reasonable size can be 1920 x 1080 Saved for web from photoshop or any other software also 1440 x 900 is a good size but you will find it a bit blurry on 21" plus screens
I'm working on the design for a windows 8 app, with a team of developers.We have finalized most of the screens for the app, the developer informed me to do the mockup of the entire app in photoshop to be presented to him and the screen size should be 480 x 800. ( right now sitting at 480 x 1800 due to scroll in page)
I have been informed to optimize the mockup for the other 2 remaining screen sizes 768 x 1280 and 720 x 1280 is this required? wouldnt this be covered in development stage.
From my present html5 and css knowledge building small static websites, width 100% in a container with width wouldnt fix this?
As the design is following the guidelines with grids i made from the guidlines pdf i had set it up for 480 x 800 now with two new screen size how can i go about this?
Can i change the canvas size in photoshop and resize all the elements?.
Please let me know if there is anyway possible to get hands on - SplashScreenImage.Screen-WXGA.jpg , SplashScreenImage.Screen-720p.jpg so i can overlay the jpg in photoshop and create grid i have windows 7 not able to install SDK to get these 2 images.
Mockups for other resolutions would be (almost) the same. There is automatic scaling. The only difference is that 720p resolution screens represent scaled 480x853 resolution, which is almost never any problem (if you have scrollable pages, like you described, the developer has to only make sure that the scrollable component is the one to be expandable in height).
See more here.
The only problems are images. The advice (of the above source) is to use the highest scale, that is for images of size 100x100 on 480x800 screen, use files of 160x160 size.
I'm currently developing a website. I'm using an img in HTML file with dimensions 1466x530. It works fine on laptop (1366x768) but it is kind of zoomed in desktop (1024x768). Also the pages that were perfect in laptop resolution are zoomed in desktop. Could you help me please.
.center-shadow {background:url(../images1/center-shadow.png) center top no-repeat; }
Yes It happens, because 1480x530 is bigger image for 1024 resolution hence it looks zoomed and same goes for fonts which you have sized in pixel units it will tend to look different sizes in different screens.
if you want to show your site in same proportions in all screens you must use Media Query or setup such way it looks best in all screens.
Thanks
Manoj Soni