HTML5 and CSS3 – Background Image Positions

It’s All Relative

ansley-1-25The viewport you view pages on comes in many sizes.  The viewport is not the page.  You have to scroll inside the viewport to see the entire page.   Setting up the clear difference is going to help understand how background images work.

Top left, top right, bottom left, bottom right and center center can apply to a div, or to the viewport.  You position things relative to either.  These positions apply to the viewport, or to the page.

Here are the values for background-image positions:

background-image: url(…), url(…);                 /* two images if you’d like */
background-attachment: value;                     /* scroll OR fixed which centers it in the viewport*/
background-position:  horizontal vertical;     /* replace horizontal with left, center or right – the vertical is optional – default is center, or specify top, center or bottom */
background-repeat: repeat or no-repeat or repeat-y or repeat-x;   /* default is top left for no-repeat */
background-size: width height; (unit of measure); OR auto; (maintain aspect ratio); OR cover; (no distortion sizes the image to fill the height and width, some clipping of the image will occur to avoid distorting the image); OR contain; (will have gaps around it to preserve proportion)  /* this is the file’s properties set in a unit of measure.  */

CSS3 multiple background images 

body {        /* Four corner images and one background image repeated */
background-image:
url (thefile/imagecorner1.png),
url (thefile/imagecorner2.png),
url (thefile/imagecorner3.png),
url (thefile/imagecorner4.png),
url (thefile/background.png);
/* Their positions followed by a comma */
top left,
top right,
bottom left,
bottom right,
top left;
/* How each repeats */
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat;
background-attachment: fixed;
background-color: #ff0072;
}
It all happens in the CSS….

The shorthand property – easy on the code, but doesn’t work in older browsers:

The syntax for the shorthand property to specify the different stylistic values on a single line using spaces to separate the values:

background: url (path) position / size repeat-style attachment color;   /* the syntax */

background: url (path) center / contain no-repeat fixed black;      /* an example */

Remember:

1.  the default size of an image is the actual size of the image as defined by the dimension in the image file.
2.  Default tiling is set to repeat in all directions.
3.  If you don’t specify the background-attachment file or have no content yet (which means the page has no height), center will put it at the top of the viewport in the center.
4.  You position images relative to the page OR to the viewport.  Background-attachment: fixed; along with background-position: center and no-repeat will contain the image in the center of the viewport – even if the page is empty.
5.  Get the perfect image background when you say background-position: left top; when used with background-size: cover, and the image size you’d like (ie., 1024 x 729) set in pixels at 72  pixels per inch (dpi).  You can set your styling and positioning anyway you’d like.  You can also set the opacity for images and I have covered that in my article Design with Color Control and Opacity.

Play with the different positions – that is how you will get good at it.

Christina Descalzo
Web Design and Development

Advertisements

PC’s, Tablets, Handheld Devices – How to Build a Better Website

Website Design – What About Hand-Held Devices?

A website looks different on a tiny hand-hand with a resolution of  960×640 than it does on a 23″ monitor with a resolution chosen of 1920×1080.  The monitor size and screen resolution choices which are separate issues can vary significantly.  You have the tablet, a 15 inch Mac with 1440×90 resolution, a 23 inch PC with 1920×1080 resolution.  Monitor size alone comes in 6 inches, 13 inches, 15 inches, 17 inches, 19 inches, 21 inches, 23 inches, etcetera.

Designing a site with this in mind makes it easier to understand that the site should be flexible and ready for drastic changes that would benefit the hand-held device.

Basically, you can create a beautiful website which can be viewed on most PC’s monitor sizes varying from 13 inches to 24 inches and larger.  If your site is flexible, in most cases, you wouldn’t even tell the difference between browsers.  Scrolling will occur on pc’s with low resolution levels.

An example might be like this:  Your site is built with 1000px Container.  Viewed in 800×600 resolution, some clipping will take place which will produce a scroll bar.

Stylesheets and Disabilities

The lower resolutions produce larger font, and in some cases, visitors have set Custom Controls to affect the stylesheets to get the larger font!  Don’t forget the hundreds of thousands of visitors with disabilities.  You can “listen” to your site through the Firefox browser.  This is a big reason to ensure your site offers image “alt” tags for adding a description instead of the image.  Take a listen to your website!  Again, in a perfect world, you have to be flexible.

Handhelds  and Print – Separate Stylesheets Are a Must!

When it comes to hand-held devices and great design, this is where a separate style sheet is a must.  The phone or device itself tells the browser what it is, and it will (the browser) pick up the alternative style sheet.  As a designer, you will need to know how to turn off large images and anything else that is not viewable by a small device.  At the same time, you have the capability to create a much simpler, readable, useable website that still has a good flow and ease of use by your visitors.

A well designed website should have these three stylesheets:
1.  For “all” types of media – again, good design should cover this, even if it looks a little different in the various browsers, resolutions, and monitor sizes that exist.
2.  A separate stylesheet for hand-held devices.  The site would look much different but should be designed with this in mind.  Flow is the key.  Larger images would disappear or made smaller, small ads can be resized larger, but the stylesheet still accesses the same information in the site.  Font size can be adjusted (font issues can happen – check out what your site looks like with just default font, too), JavaScript and Flash can get turned off – leaving a simplified version of your site & suitable for hand-held devices that don’t have mouse support.  Text ads work well on handhelds.
3.  Create a separate stylesheet in the event your visitor wants to print a page.  This would include changing color to black and white, change the font to serif and watch the font size, underline links, remove non-essential images, remove navigation, remove some or most of the advertising, remove JavaScript, Flash and animated images.

So as you can see, creating a great website is really about creating a great company and a great designer takes these things into consideration and will go to great lengths to ensure your site looks great on any device, functions 100%, is crafted with clean, validated code, and most importantly, a welcoming place for your visitors to find what they are looking for.