Css templates background images

CSS background-image Property

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

By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Tip: The background of an element is the total size of the element, including padding and border (but not the margin).

Tip: Always set a background-color to be used if the image is unavailable.

Default value:	none
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS1 + new values in CSS3
JavaScript syntax:	object.style.backgroundImage=»url(img_tree.gif)» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
url(‘URL‘)	The URL to the image. To specify more than one image, separate the URLs with a comma	Demo ❯
none	No background image will be displayed. This is default
conic-gradient()	Sets a conic gradient as the background image. Define at least two colors	Demo ❯
linear-gradient()	Sets a linear gradient as the background image. Define at least two colors (top to bottom)	Demo ❯
radial-gradient()	Sets a radial gradient as the background image. Define at least two colors (center to edges)	Demo ❯
repeating-conic-gradient()	Repeats a conic gradient	Demo ❯
repeating-linear-gradient()	Repeats a linear gradient	Demo ❯
repeating-radial-gradient()	Repeats a radial gradient	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Sets two background images for the element. Let the first image appear only once (with no-repeat), and let the second image be repeated:

body <
background-image: url(«img_tree.gif»), url(«paper.gif»);
background-repeat: no-repeat, repeat;
background-color: #cccccc;
>

Example

Use different background properties to create a «hero» image:

.hero-image <
background-image: url(«photographer.jpg»); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
>

Example

Sets a linear-gradient (two colors) as a background image for a element:

Example

Sets a linear-gradient (three colors) as a background image for a element:

#grad1 <
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow, green);
>

Example

The repeating-linear-gradient() function is used to repeat linear gradients:

#grad1 <
height: 200px;
background-color: #cccccc;
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
>

Example

Sets a radial-gradient (two colors) as a background image for a element:

Example

Sets a radial-gradient (three colors) as a background image for a element:

#grad1 <
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow, green);
>

Example

The repeating-radial-gradient() function is used to repeat radial gradients:

#grad1 <
height: 200px;
background-color: #cccccc;
background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
>

Источник

85 Beautiful CSS Background Patterns

Here is a list of some beautiful CSS background patterns for you to use.

You may also like

Underwater css pattern

Dev: Laura Sage

CSS single div geometric pattern

Dev: Lynn Fisher

Background Pattern

See the Pen Untitled by Bennett Feely (@bennettfeely) on CodePen.

Dev: Bennett Feely

One Div Pie Background

Dev: Olivia Ng

Only CSS: Border Caterpillar

Dev: Yusuke Nakaya

Background pattern

Dev: G V TANISH VETTRIVEL

CSS Heart Polka-dot Background Pattern

Dev: Brett Peters

Children in Need CSS Background Pattern

Dev: Chris Smith

Subtle Gradient Pattern Background

Dev: Chris Smith

CSS Background Pattern

Dev: Joshua Hibbert

Pure CSS Blueprint

Dev: Fabrice W.

Jason Quote Bg Pattern

Dev: George Olaru

Low Contrast Diagonal Stripes Background

Dev: Gabriel Albo

Background pattern

Dev: G V TANISH VETTRIVEL

Background pattern

See the Pen Background pattern 1 by G V TANISH VETTRIVEL (@gvtanish) on CodePen.

Dev: G V TANISH VETTRIVEL

Nezuko Kamado

Dev: Yuhomyan

Just some background patterns

Dev: Chris Smith

CSS: Complex background patterns

Dev: Dmitry

Burberry Background Patterns

Background-patterns

Dev: Webstoryboy

Plaid background

Dev: luisanogueira

Simple conic-gradient() pattern 3

Dev: Ana Tudor

Simple pure CSS café wall illusion – checker version

Dev: Ana Tudor

CSS Background Patterns

Dev: KruizerChick

Webkit Gradients

Pure CSS cube pattern < 200 bytes!

Dev: Ana Tudor

Bone Tessellated Pattern – No Div – Pure CSS

Dev: Josetxu

Simple conic-gradient() pattern 2

Dev: Ana Tudor

Background-patterns

Dev: Webstoryboy

3D Cube Tessellated Pattern – No Div – Pure CSS

Dev: Josetxu

Complex background patterns (CSS SECRETS)

Dev: Quinto Jesús

Background-patterns

Dev: Webstoryboy

Simple pattern in under 100 bytes

Dev: Ana Tudor

Brick Tessellated Pattern – No Div – Pure CSS

Dev: Josetxu

Modal Background Patterns

Dev: Juande M.R. [miXTim]

Some background patterns

Dev: Elitsa Dimitrova

Overlook Hotel Tessellated Pattern – No Div – Pure CSS

Dev: Josetxu

CSS background patterns

Dev: slycreations

Simple conic-gradient() pattern 1

Dev: Ana Tudor

CSS Background Patterns

Simple conic-gradient pattern

Dev: Ana Tudor

Some tiled background

Dev: quicksnap

CSS3 Background Patterns (base)

Background patterns

Background patterns

See the Pen background patterns by stephen sawyer (@WDev) on CodePen.

Dev: stephen sawyer

Background patterns

(Pseudo)random Background Patterns

Dev: TJ Egan

Complex Background Patterns

Dev: Ashley Sullivan

Stripes & other patterns with CSS3 — no images

Dev: Pawan Mall

CSS3 background patterns inspired by Yayoi Kusama

Dev: Morten Skogly

CSS patterns

Dev: mustafa-x

A flattened cereal box

Complex Background Patterns

Dev: yowlonglee

Complex background patterns

Dev: Frédéric MISERY

Pure CSS 1 element gradient tooltip #2 (contentEditable)

Dev: Ana Tudor

Simple CSS gradient patterns

Dev: Ana Tudor

Pure CSS background patterns library

Dev: Michal Porag

Hexagonal Tessellated Pattern – No Div – Pure CSS

Dev: Josetxu

CSS Grids and Background Patterns

Dev: LizFaria

3D Y Tessellated Pattern – No Div – Pure CSS

Dev: Josetxu

Background patterns

Background patterns

Dev: Kathleen Azevedo

Various Background Patterns

Dev: Craig DuBois

Tiny Background Patterns

Dev: Chris Smith

Randomly Generated Playing Card Background Patterns

Dev: Braydon Coyer

CSS Background Patterns

Dev: Brett Peters

Slack CSS background pattern

Dev: Marijke Luttekes

CSS3 Background Patterns (complete)

Dev: Envato Tuts+

CSS Secrets – Complex background patterns

Dev: Vijaya Kumar Vulchi

CSS Pattern

Dev: Jia Qian Koh

Infinite scrolling background

Dev: jasper

CSS Patterns

See the Pen Untitled by Marifel Barbasa (@mrbarbasa) on CodePen.

Dev: Marifel Barbasa

Generative CSS Patterns (click for new pattern)

Dev: Scott Weaver

Background patterns in css using pattern.css

Dev: Bansal

Playing with background patterns

Dev: Ana Tudor

Background linear-gradients

Dev: Sanjay Rohila

Background patterns

Repeating Background Patterns with CSS3 Gradients

Dev: Vian Esterhuizen

CSS Background Patterns – Boxes

Dev: Praveen Puglia

conic-gradient() panels!

Dev: Ana Tudor

Background patterns

Dev: yuanchuan

CSS background patterns library

Dev: Avaz Bokiev

1 element card background patterns (see description)

Dev: Ana Tudor

Background patterns

Dev: yuanchuan

Grid, Flex, and background patterns

Latest Post

55 Cool CSS Calendars

19 Barcodes in CSS

25 CSS Masonry Layout Examples

23 CSS Card Layouts

27 CSS Subscribe Forms

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok

Источник

HTML Background Images

A background image can be specified for almost any HTML element.

Background Image on a HTML element

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

Example

Add a background image on a HTML element:

You can also specify the background image in the element, in the section:

Example

Specify the background image in the element:

Background Image on a Page

If you want the entire page to have a background image, you must specify the background image on the element:

Example

Add a background image for the entire page:

Background Repeat

If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:

Example

To avoid the background image from repeating itself, set the background-repeat property to no-repeat .

Example

Background Cover

If you want the background image to cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed:

This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):

Example

Background Stretch

If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100% :

Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.

Example

Learn More CSS

From the examples above you have learned that background images can be styled by using the CSS background properties.

To learn more about CSS background properties, study our CSS Background Tutorial.

Источник