Backgrounds 7 100
Backgrounds 7 13
Backgrounds 7 1920x1080
Background 7 Years
Example
Set a background-image for the body element: body
background-image: url('paper.gif');
background-color: cccccc;
Browse our beautiful selection of free background imagesall submitted by our community of talented contributors and completely free to download and use. Find 70s background stock images in HD and millions of other royalty-free stock photos, illustrations and vectors in the Shutterstock collection. Thousands of new, high-quality pictures added every day. Browse through our free wallpaper selection and download each background picture for free. All free wallpapers on Pexel work well for Mac OS computers, MacBooks and Windows computers. HD wallpaper love wallpaper nature wallpaper 4k wallpaper nature flower wallpaper mobile wallpaper desktop backgrounds galaxy wallpaper. Hallmark Channel. Because you've always wanted to live in a Hallmark movie. Step into Hope Valley. Try it Yourself Example
Set two background images for the body element: Noiseless pro 1 0 1 . body
background-image: url('img_tree.gif'), url('paper.gif');
background-color: cccccc;
Try it Yourself
More 'Try it Yourself' examples below. Definition and Usage
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.
Note: IE8 and earlier do not support multiple background images. CSS Syntax Property Values Backgrounds 7 100 Value Description url(' URL ') The URL to the image. To specify more than one image, separate the URLs with a comma none No background image will be displayed. This is default linear-gradient() Sets a linear gradient as the background image. Define at least two colors (top to bottom) radial-gradient() Sets a radial gradient as the background image. Define at least two colors (center to edges) repeating-linear-gradient() Repeats a linear gradient repeating-radial-gradient() Repeats a radial gradient 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 body 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;
Try it Yourself 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 */
Try it Yourself Example
Sets a linear-gradient (two colors) as a background image for a div element: grad1
height: 200px;
background-color: cccccc;
background-image: linear-gradient(red, yellow);
Try it Yourself Example
Sets a linear-gradient (three colors) as a background image for a div element: grad1
height: 200px;
background-color: cccccc;
background-image: linear-gradient(red, yellow, green);
Try it Yourself 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);
Try it Yourself Example
Garageband 10 1 5 complete recording studio and more . Sets a radial-gradient (two colors) as a background image for a div element: grad1
height: 200px;
background-color: cccccc;
background-image: radial-gradient(red, yellow);
Try it Yourself Example
Sets a radial-gradient (three colors) as a background image for a div element: grad1
height: 200px;
background-color: cccccc;
background-image: radial-gradient(red, yellow, green);
Try it Yourself Example
The repeating-radial-gradient() function is used to repeat radial gradients: grad1
height: 200px;
background-color: cccccc;
background-image: repeating-linear-gradient(red, yellow 10, green 20);
Try it Yourself Related Pages
CSS tutorial: CSS Background, CSS Backgrounds (advanced), CSS Gradients
HTML DOM reference: backgroundImage property
Backgrounds 7 13
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: div Try it Yourself
You can also specify the background image in the style element, in the head section: Example
Specify the background image in the style element: Pdf expert edit and sign pdf 2 2 16. style
div
background-image: url('img_girl.jpg');
/style Try it Yourself Background Image on a Page
If you want the entire page to have a background image, you must specify the background image on the body element: Example
Add a background image for the entire page: style
body
background-image: url('img_girl.jpg');
/style Try it Yourself 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 style
body
background-image: url('example_img_girl.jpg');
/style Try it Yourself
To avoid the background image from repeating itself, set the background-repeat property to no-repeat . Example style
body
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
/style Try it Yourself 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 style
body
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/style Try it Yourself 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 Backgrounds 7 1920x1080 style
body
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100 100;
/style Try it Yourself 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.
Background 7 Years
Backgrounds 7 13
Backgrounds 7 1920x1080
Background 7 Years
Example
Set a background-image for the body element: body
background-image: url('paper.gif');
background-color: cccccc;
Browse our beautiful selection of free background imagesall submitted by our community of talented contributors and completely free to download and use. Find 70s background stock images in HD and millions of other royalty-free stock photos, illustrations and vectors in the Shutterstock collection. Thousands of new, high-quality pictures added every day. Browse through our free wallpaper selection and download each background picture for free. All free wallpapers on Pexel work well for Mac OS computers, MacBooks and Windows computers. HD wallpaper love wallpaper nature wallpaper 4k wallpaper nature flower wallpaper mobile wallpaper desktop backgrounds galaxy wallpaper. Hallmark Channel. Because you've always wanted to live in a Hallmark movie. Step into Hope Valley. Try it Yourself Example
Set two background images for the body element: Noiseless pro 1 0 1 . body
background-image: url('img_tree.gif'), url('paper.gif');
background-color: cccccc;
Try it Yourself
More 'Try it Yourself' examples below. Definition and Usage
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.
Note: IE8 and earlier do not support multiple background images. CSS Syntax Property Values Backgrounds 7 100 Value Description url(' URL ') The URL to the image. To specify more than one image, separate the URLs with a comma none No background image will be displayed. This is default linear-gradient() Sets a linear gradient as the background image. Define at least two colors (top to bottom) radial-gradient() Sets a radial gradient as the background image. Define at least two colors (center to edges) repeating-linear-gradient() Repeats a linear gradient repeating-radial-gradient() Repeats a radial gradient 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 body 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;
Try it Yourself 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 */
Try it Yourself Example
Sets a linear-gradient (two colors) as a background image for a div element: grad1
height: 200px;
background-color: cccccc;
background-image: linear-gradient(red, yellow);
Try it Yourself Example
Sets a linear-gradient (three colors) as a background image for a div element: grad1
height: 200px;
background-color: cccccc;
background-image: linear-gradient(red, yellow, green);
Try it Yourself 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);
Try it Yourself Example
Garageband 10 1 5 complete recording studio and more . Sets a radial-gradient (two colors) as a background image for a div element: grad1
height: 200px;
background-color: cccccc;
background-image: radial-gradient(red, yellow);
Try it Yourself Example
Sets a radial-gradient (three colors) as a background image for a div element: grad1
height: 200px;
background-color: cccccc;
background-image: radial-gradient(red, yellow, green);
Try it Yourself Example
The repeating-radial-gradient() function is used to repeat radial gradients: grad1
height: 200px;
background-color: cccccc;
background-image: repeating-linear-gradient(red, yellow 10, green 20);
Try it Yourself Related Pages
CSS tutorial: CSS Background, CSS Backgrounds (advanced), CSS Gradients
HTML DOM reference: backgroundImage property
Backgrounds 7 13
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: div Try it Yourself
You can also specify the background image in the style element, in the head section: Example
Specify the background image in the style element: Pdf expert edit and sign pdf 2 2 16. style
div
background-image: url('img_girl.jpg');
/style Try it Yourself Background Image on a Page
If you want the entire page to have a background image, you must specify the background image on the body element: Example
Add a background image for the entire page: style
body
background-image: url('img_girl.jpg');
/style Try it Yourself 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 style
body
background-image: url('example_img_girl.jpg');
/style Try it Yourself
To avoid the background image from repeating itself, set the background-repeat property to no-repeat . Example style
body
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
/style Try it Yourself 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 style
body
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/style Try it Yourself 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 Backgrounds 7 1920x1080 style
body
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100 100;
/style Try it Yourself 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.
Background 7 Years
