Background Image

/' bak -ground im -ij/

The background-image property sets one or more background images for an element. [source]

Please upload the Image you want to use

Image data

Width Height
Recommended Size 1920px 1020px
Your Image Size

Background Positioning

The background-position property sets the starting position of a background image.

Slide Left to right

Slide up and down

Zoom in and out

vulputate ut. Semper quis lectus nulla at volutpat. Elementum integer enim neque volutpat ac tincidunt vitae semper. Mauris ultrices eros in cursus turpis massa tincidunt dui. Auctor eu augue ut lectus arcu bibendum at. Placerat in egestas erat imperdiet sed euismod nisi. Neque sodales ut etiam sit. Semper viverra nam libero justo. Feugiat nibh sed pulvinar proin gravida hendrerit lectus. Tincidunt augue interdum velit euismod in pellentesque massa. Vel eros donec ac odio tempor orci dapibus ultrices. Enim sed faucibus turpis in. Tellus id interdum velit laoreet.

Applying the Image as a Background

The two rectangle are examples of a div element. The div element on the right is using our image as backgound image while the div on the left is not assigned a background image.

*Notice the size and demensions of the background image is, often, determined by the size, demension and "Background-size" property of the div or the html element that is using it as background image.

The Div - Without a Background Image

The Div - With a Background image

Background Size

The background-size property specifies the size of the background images. There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated with comma). [source]

Auto
Cover
Contain

Understanding Aspect Ratio

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora earum inventore soluta alias est odio facilis qui maxime voluptates aliquam, animi amet cupiditate totam atque laborum excepturi doloribus dolorum hic nobis voluptatibus tenetur autem accusamus! Culpa laboriosam nesciunt qui reiciendis!

Adjust image width

Background Image As Parallax

Anatomy of a Webpage

anatomy of a webpage

Compare images

Use the scroll bar to see what your image look like as a hero compared to what an ideal hero image looks like.