How to Resize Background Images with CSS3

In CSS2.1, background images applied to a container retained their fixed dimensions. Fortunately, CSS3 introduces the background-size property which allows backgrounds to be stretched or squashed. It’s ideal if you’re creating a template using Responsive Web Design techniques.

There are several ways to define sizing dimensions — view the CSS3 background-size demonstration page.

Absolute Resizing

Length measurements can be applied using.

1
background-size: width height;

By default, the width and height are set to auto which retains the original image dimensions.

Continue reading

Implementing responsive design

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.

In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?

Continue reading

Circular Images with CSS3

To make a circular image using CSS3 you need to create an image and wrap it with a div

then add the css below

First the HTML code:

<div class="circular"><img src="http://link-to-your/image.jpg" alt="" /></div>

Then add the CSS code


.circular img {
  max-width: 100%;
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
  -ms-border-radius: 150px;
  -o-border-radius: 150px;
  border-radius: 150px;
}

Continue reading