CSS image and CSS Background and Image Gallery

0 131

CSS image Background Thumbnail Image Gallery Image Sizing Padding

in this tutorial we will discuss on CSS image Background Thumbnail Image Gallery Image Sizing Padding


After the release of HTML5 and CSS3 most of the web designer developing graphic base web sites.CSS3 make is easy for a web designer to design web site graphically with ease.HTML5 providing the amazing experience to web designer design a graphically base web site with CSS3.

Graphic Format

There are many graphic formats available but most commonly Joint Photographic Experts Group (JPEG), Graphics Interchange Format (GIF), and Portable Network Graphics (PNG) are used in web designing.
For web page JPEG and PNG graphics recommended these formats takes very less time to download and show in browser

Graphics Insertion

To insert a graphic <img> tag used <img> tag is a standalone tag don’t not have any closing tag. GIF, JPEG, BITMAP (BMP), and PNG are most commonly used a graphic in the web page.

CSS Image Sizing and Padding

The Height and width property used to give height and width to your image ,height and width property can be used inline inside <img> tag and also can use in separate CSS style sheet to give height and width to an image.

Different CSS properties and values of image.

Property Values Description
height Auto "Length" "%" "inherit" height property will define a height of an element.
max-height none Length" "%" "inherit" a max-height property will define max height of an element.
max-width none "Length" "%" "inherit" a max-width property will define max width of an element.
min-height Length "%" "inherit" a min-height property will define a minimum height of an element
min-width Length "%" "inherit" the min-width property will define minimum width of an element.
width Auto "Length" "%" "inherit" width element property defines the width of an element.

Thumbnail Graphics

Use of high resolutions images will reduce a speed of web page loading ,though some time high-resolution images are necessary and it will be the case of slow website loading to avoid these thumbnails are used.
A thumbnail is small image or part of a large image by clicking thumbnail will to a large image, even we can apply the hover effect to thumbnail through CSS and JavaScript.


Through CSS we can define Background Color and background image in our webpage.CSS has define properties for Background image/Color with these properties we can define position color image file etc .

CSS properties for Background are followed..

Property Description
background-color sets the background color for the element.
background-image sets the backgroung image for the element.
background-repeat sets how the background image will be repeated.
background-attachment sets whether background image is fixed or scrolls with a web page.
background-position sets a position of a background


With background-color property, we can specify the color of web page background.

We can set the color background in our page like this with background-color property.

Background image

To define an image file as a background in the webpage or for element background-image property used.one thing to note that when we apply an image as background it is gonna cover entire area by repeating image one time to avoid this backgroundrepeat property used.
To use an image as background we can set code like this .

Background repeat

To avoid background to repeat background-repeat property is used.

Background position

We can set a position of background through background-position property.

Image Gallery

With CSS, we can create image gallery.CSS can give nice style to gallery through borders that can adjust its height width and positions .



Leave A Reply

Your email address will not be published.