I am making a website for my school, and I used to do that work on windows 7 before i switched to Ubuntu. I know that I used 1920x1080 resolution pictures for background on windows and it was perfect but on ubuntu it does not fit. I tried in a couple of different browsers. At school they are reviewing it on windows, my concern is if I make it lower resolution to fit here on my system will it mess up the website when they review it and vice versa?
You need to add background-size: cover; property to your background image styles. From https://developer.mozilla.org quoting:
The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.
It will not perfectly fit for some greater resolutions or resolutions with different ratios, but it will ensure that it covers it completely at the cost of fitting the whole image. The image will not get stretched either.
Related
Okay, so here's the issue. I'm designing a website mockup in Photoshop (set at 72dpi).
I export a logo.png file with the width and height of: 295px x 129px.
I visit the logo.png file directly in the browser (Chrome or Firefox), and the image appears 25% larger. I verify this by taking a screenshot and comparing them side by side.
I was wondering what the issue was, and I realized that on Windows 8 control panel (Appearance and Resolution -> Display), "Change the size of all items" is set at "Larger - 150% (default)". I'm on 2 4k monitors.
If I change this value to 125% and log back in to the windows user, everything appears way smaller (uncomfortably smaller), but in the browser, my image now appears at the correct size.
So my question is this..
Is there a way to prevent the browsers from resizing my image content? I would prefer not to hack it by specifying width:75%, for obvious reasons (those with 100% OS item scales would see it even smaller).
I stumbled across an interesting behaviour of Pygame under Win 7. The program I wrote has originally been tested under Win XP. When changing to the FULLSCREEN mode, it would "stretch" the images to fit the ratio of the fullscreen. Yet under Win7 it doesn't...
When I change to fullscreen, everything remains at its original size, instead of stretching the images, the borders are filled with my background colour.
Is this intentional or a bug? What behaviour would you expect in this case? I find it quit interesting, yet I'd like to have a way to stretch the images to fit the screen also under Win7, preferably without having to rescale them all (it's quite a number...).
Pygame won't distort the aspect ratio of the image on the screen when switching to fullscreen, so when you set the display mode using
pygame.display.set_mode((width,height),pygame.FULLSCREEN)
black space will be added to fill in areas that are left open when the aspect ratio of your monitor doesn't match the ratio of width to height.
In documentation stated that it is enough to keep the only WXGA splashscreen file and it will be scaled by windows Phone OS automatically.
To display a splash screen for all resolutions, use a single image
file named SplashScreenImage.jpg that is 768 × 1280. The phone
automatically scales the image to the correct size.
http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974(v=vs.105).aspx#BKMK_Splashscreens
But when I'm using the only file no scaling occurs. I still could see black line on the top of the phone during app start.
Sample here:
https://dl.dropboxusercontent.com/u/19503836/SplashSample.zip
Thanks for any suggestions
You'll notice that it says "scale" and not stretch - which is exactly what's happening. Windows Phone 8 supports 3 resolutions (so far)...
480x800 (15:9)
720x1280 (16:9)
768x1280 (15:9)
You'll notice that the aspect ratio of #1 and #3 are the same, but #2 is different - and that's the problem.
For an image to fit all resolutions it would have to be stretched, which would look very bad so Windows Phone 8 doesn't do that. Instead, it scales the image to fit the screen but a black/white bar appears at the top of screen for #2.
The only way to avoid the black/white bar at the top of the screen is to create 3 separate splash screen and specify them in the WP8 manifest file.
Note: Making your app work and look correct at multiple resolutions is what every app developer should do. All the major platforms (iOS, Android, Windows 8, etc) support multiple screen sizes and/or resolutions so creating multiple icons sizes, splash screen sizes, background images, and other assets is part of the jobs.
I don't think a "splashscreen.jpg" is a good choice in wp8 any longer, even the templates of sdk doesn't have one.
The reason is if the firts page of your app is massive and your have a splashScreen, you may find your screen blink when starting.
So I would add a blank page and set it as the first page. Also you can add your "Splashscreen" Image here.
I recently put together a website exclusively using a computer with a wide screen monitor. Later, When opening the same pages online using a computer with a smaller sized monitor, I suddenly noticed that all the div positions are completely out of place. My question is how to use the widescreen monitor to continue to develop my webpages without messing up div positions for views on regular sized monitors?
Re replies:
Thanks for the advice guys. I agree that the design of the page should be flexible enough to accommodate most browser window sizes. However, when u are working with a widescreen monitor and not paying attention it is easy to overcompensate div placements and element sizes. My next question is on how to be sure of regular browser window dimensions and how to force my browser window into that size?
Thanks Cyrena for giving me directions with the development tools. I do use them and check across browsers. But My problem here was working exclusively on a widescreen monitor with the browser maximized. I don't want to make the same mistake, so I need to figure out how to resize my browser window with the right dimensions.
Two basic approaches off the top of my head:
Resize your browser to be the width of your minumum supported desktop/browser size.
Set desktop preferences to be different sizes (like profiles) and switch between them during testing phase.
The truth is that a really good looking site will never work on all browser configurations. Choose a bar and work against that.
Don't maximize your browser window? Just shrink it horizontally a bit?
But any website that has such a high dependence on the shape of your display is poorly designed. It should fit to any size display that's bigger than some minimum (no use spending extra effort to make it fit on a 100x100 pixel screen)
If you use IE's Developer Tools, you can resize the window to see what it would look like at different resolutions.
Check it out in:
Tools > Developer Tools > Tools menu > Resize.
You will also want to make sure you are testing your website on other browser / OS combinations at the very least.
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.