+91 935 33 70 081    |    +91 935 33 89 029

BACKGROUND IMAGE PROPERTY

How to make background images responsive in HTML?
How to make background images responsive in HTML?
Responsive Background Image CSS Property:

Images stand as the most important part for an attractive website. Set the background image to the website by using the CSS style, In CSS "style" tag, add the property background-image. CSS contains several properties for setting the background images in the webpage.

The background image on the website should cover the browser whole window :
  1. No white space in the page. it gets filled with the background image.
  2. No Exceeding scale of background images
  3. Retains image according to the aspect ratio
  4. The image should be at the center of the webpage
  5. Compatible in the cross-browser as possible
This property can be used on the body to set the background of the entire page on the website:
  1. background-color: set the background color of an element
  2. background-image: The source URL for the image.
  3. background-repeat: How the background image will be repeated of both horizontal or vertical
  4. background-attachment: There three attachment values are fixed, scroll, local for setting the background
  5. background-position: Setting the background by left, right, top, bottom, and center values.
Background image CSS Cover:

Use the CSS property to stretch an image to fit in the background element, setting background-size to cover, the browser will take the automatic scale of the background image to cover the entire area of the element.

Example:

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Background image CSS Contain:

Contain values frame the size of the containing box of the background image for should not exceed the length of the containing box, resizing the background image to be visible.

Example:

background-size: contain; background-repeat: no-repeat;

Find out the lastest designs, which make your designs trending