How to set multiple background images using CSS ?

CSS3 allows us  to set multiple background images for box elements, using nothing more than a simple comma-separated list.

Browser support : Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

Example:- 

#example1 {
   width: 500px;
   height: 250px;
   background-image: url('Image 1 URL'), url('Image 2 URL');
   background-position: center bottom, left top;
   background-repeat: no-repeat;
}

Multiple background images can be specified using either the individual background properties or the background
shorthand property.

Method 1:-
Using individual background properties

#example1 {
   background-image: url('Image 1 URL'), url('Image 2 URL');
}

A comma separated list is also used for the other background properties; background-repeat,background-attachmentbackground-positionbackground-clipbackground-originand background-size.

#example1 {
   background-position: center bottom, left top;
}

Method 2:- Using the ‘background’ shorthand property

#example2 {
background: url('Image 1 URL') center bottom no-repeat, url('Image 2 URL') left top no-repeat;
}

Reference: http://www.css3.info/preview/multiple-backgrounds/

Programming is easy….

Advertisements

Download/Save image from URL in

Once, I was working on the excel import functionality in one of my project. There was a image url field in excel file and i need to import all data and save image at specific location from given url. We can easily save/download image from a url as below, May be it can help you.

     
        public bool SaveImageFromUrl(string _prmStrFromImageUrl, string _prmStrSaveFilePath)
        {
            WebResponse _response = null;
            Stream _remoteStream = null;
            StreamReader _readStream = null;

            try
            {
                WebRequest _request = WebRequest.Create(_prmStrFromImageUrl);

                if (_request != null)
                {
                    _response = _request.GetResponse();

                    if (_response != null)
                    {
                        _remoteStream = _response.GetResponseStream();
                        string content_type = _response.Headers["Content-type"];
                        System.Drawing.Imaging.ImageFormat _imageType;

                        if (content_type == "image/jpeg" || content_type == "image/jpg")
                        {
                            _imageType = ImageFormat.Jpeg;
                        }
                        else if (content_type == "image/png")
                        {
                            _imageType = ImageFormat.Png;
                        }
                        else if (content_type == "image/gif")
                        {
                            _imageType = ImageFormat.Gif;
                        }
                        else
                        {
                            return false;
                        }

                        _readStream = new StreamReader(_remoteStream);
                        System.Drawing.Image img = System.Drawing.Image.FromStream(_remoteStream);

                        if (img == null)
                            return false;

                        //Save Image
                        img.Save(_prmStrSaveFilePath, _imageType);
                        img.Dispose();
                    }
                }
            }

            finally
            {
                //Clean Up objects
                if (_response != null) _response.Close();
                if (_remoteStream != null) _remoteStream.Close();
                if (_readStream != null) _readStream.Close();
            }

            return true;
        }