Tweet
After the great success of my previous post "CSS: Making background image fit any screen resolution" I would like to share a new version of the same.
The following is just a revised post, so basically it contains the same code, but with a twist.
The point is that many readers have asked me how they could have a scrolling page while the image stays stretched and fixed.
Well... I suppose you could get there and find how to do it by yourself, but I thought I could share it anyway, maybe for those of you that are not really experienced enough already (time to grow ladies and gentlemen - I'm joking... obviously...). We are going to use a few CSS lines and two HTML tags.
Ok, let's get into it!
Web development, web design and programming.
Showing posts with label screen resolutions. Show all posts
Showing posts with label screen resolutions. Show all posts
Monday, 28 May 2012
Wednesday, 10 August 2011
CSS: media queries and screen resolutions
Tweet
Today we are going to explore the media queries in CSS. We have already talked about @media, but recently I have used it to create different styles for different target browsers, so I would like to share my experiences.
What is really useful of media queries is that, according to what the user is using to browse your web site, you can change things to fit the target screen resolution. For example, when a user is using a smartphone or a tablet, you can change how the main menu is displayed: from a long series of links to a drop down menu.
But what are media queries? Let's see them.
Today we are going to explore the media queries in CSS. We have already talked about @media, but recently I have used it to create different styles for different target browsers, so I would like to share my experiences.
What is really useful of media queries is that, according to what the user is using to browse your web site, you can change things to fit the target screen resolution. For example, when a user is using a smartphone or a tablet, you can change how the main menu is displayed: from a long series of links to a drop down menu.
But what are media queries? Let's see them.
Monday, 20 June 2011
Web Design: resizeMyBrowser
Tweet
When building web sites, one of the most important things we must deal with nowadays is the target screen size. I have published different articles on the subject, but everytime I think about it and search on the web, I find different tools to check if I've done things right. With the explosion of handheld devices, the screen size has become a more important matter, and what we see on our beloved widescreen monitor is just not enough to evaluate how visitors will look at our web site.
There is one tool I would like to suggest; a tool conceived to help us in that evaluation.
The testing is done quite accurately, and there's the possibility to see the result considering the outer window (including toolbars) or considering the inner window (the interior of the browser window).
If you use Firefox and the Web Developer toolbar, you would probably don't need this, but I think that an additional testing tool is always welcomed.
Happy coding to all of you!
When building web sites, one of the most important things we must deal with nowadays is the target screen size. I have published different articles on the subject, but everytime I think about it and search on the web, I find different tools to check if I've done things right. With the explosion of handheld devices, the screen size has become a more important matter, and what we see on our beloved widescreen monitor is just not enough to evaluate how visitors will look at our web site.
There is one tool I would like to suggest; a tool conceived to help us in that evaluation.
ResizeMyBrowser
resizeMyBrowser is a simple tool that will resize your browser window according to different standards like the iPhone 3G/3GS screen size (320x480 or 480x320), iPhone 4 (640x960 or 960x640), iPad and so on. In addition to the available presets, there's the possibility to create custom presets.The testing is done quite accurately, and there's the possibility to see the result considering the outer window (including toolbars) or considering the inner window (the interior of the browser window).
If you use Firefox and the Web Developer toolbar, you would probably don't need this, but I think that an additional testing tool is always welcomed.
Happy coding to all of you!
loading..
Monday, 7 March 2011
CSS: Backgrounds with CSS3
Tweet
One of the most searched effects for web sites today is the background image covering all the visible area. I've already explained a method to achieve that in the past (Making background image fit any screen resolution). With CSS3 there are a set of new property that can handle it quite easily. Let's see them.
One of the most searched effects for web sites today is the background image covering all the visible area. I've already explained a method to achieve that in the past (Making background image fit any screen resolution). With CSS3 there are a set of new property that can handle it quite easily. Let's see them.
The background-size property
The background-size property defines the size of a background image (ah!). You can set the image size in pixels or percentages. With percentage, the size will be relative to the container.
div
{
background:url(example.gif);
-moz-background-size:100% 100%; /* Firefox */
background-size:100% 100%;
background-repeat:no-repeat;
}
Monday, 18 October 2010
CSS: Making background image fit any screen resolution
Tweet
Making a background image fit any screen resolution is something everybody needs at least once in a lifetime. It is easy to create such effect, using CSS, and the result is quite good.
First of all, select your background image. Well, it seems that choosing is not really a big issue, but let me tell you that you need to do it carefully.
First of all, your background image should be large enough to fit your largest target screen size, but should not be too heavy in weight. As you may understand, the image's weight in bytes might affect your site speed.
Secondly, remember that a too bright image might disturb the correct balance of the content. It should be meaningful to the overall theme and content of the site. However, it should not be too invasive, distractive or in any way prevent the navigation of the site itself.
Please see the revised solution for fixed backgrounds with scrolling pages:
CSS: Making background image fit any screen resolution (revised).
CSS: Making background image fit any screen resolution (revised).
Making a background image fit any screen resolution is something everybody needs at least once in a lifetime. It is easy to create such effect, using CSS, and the result is quite good.
First of all, select your background image. Well, it seems that choosing is not really a big issue, but let me tell you that you need to do it carefully.
First of all, your background image should be large enough to fit your largest target screen size, but should not be too heavy in weight. As you may understand, the image's weight in bytes might affect your site speed.
Secondly, remember that a too bright image might disturb the correct balance of the content. It should be meaningful to the overall theme and content of the site. However, it should not be too invasive, distractive or in any way prevent the navigation of the site itself.
Subscribe to:
Posts (Atom)