HTML & CSS image handling – Part 1

Hi, this is Nico from Trick Gaming Studios.

I have been working on some web projects and wanted to share with you a series of posts about custom image handling.

HTML/CSS image manipulation with cross-browser compatibility:
IE – Firefox – Chrome – Safari.

html_css

Some of the typical cases of image manipulation we may find when developing web projects:

1.- Background, always centered even after modifying screen size. Style located body tag.

customImage

HTML CSS
<html><head><link rel=”stylesheet” type=”text/css” href=”style.css” /></head><body class=”custom_image“></body></html> .custom_image {background: url(image.png) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

2.- Force an image to adapt to a fixed size regardless of its original dimensions. An example of this situation can be seen below and how we can handle it both with HTML or CSS:

imageSizeIn this case, the left image (isologotype) and the right image (isotype) have different dimensions. By using the code below, we can force their size to be the same:

ejemplo_manipulacion1   ejemplo_manipulacion2

Both images are centered on the screen because the style is declared in the margin-left: auto and margin-right: auto. It is always convenient to separate CSS and html by identifying each component by its respective name of “class” or “id”.

HTML

CSS
<html><head><link rel=”stylesheet” type=”text/css” href=”style.css” /></head><body style=”background-color:#999;”><img class=”custom_image” src=”image.png”></body></html> .custom_image {width:170px;height:150px;border-width:thick;background-size:cover;background-repeat:no-repeat;display:block;margin-left:auto;margin-right:auto;}
This entry was posted in Development. Bookmark the permalink.

One Response to HTML & CSS image handling – Part 1

  1. Pingback: html background image always centered | Background images paper

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>