How to add background image css
How to add background image css
How to Add Background Image with CSS
Let us demonstrate how you can add and position a background image in an HTML document with CSS styles.
How to position a background image.
Example of adding a background image:
Result
In the example above, the background image is positioned in the center (you can also use other values such as left top; left center; left bottom; right top; right center; right bottom; etc.).
Here are some ways of positioning a background image:
To repeat a background image, you can use the following values:
Example of adding a background image repeated vertically:
In the example above, the background image is repeated only vertically.
Use the «no-repeat» value so as the background image won’t be repeated (the image will only be shown once).
Example of adding a non-repeated background image:
CSS3 introduced the background-size property, which helps us to control the background-image size as displayed in its parent element. In the following example, as a background-size value, we use “cover”, which scales the background image as much as possible so that the background image entirely covers the area.
To create a full-page background image, also add a background image to the container with the height set to 100%.
Example of adding a full-page background image:
To add a transparent background image, you need the opacity property, which specifies the transparency of an element. Take a value from 0.0-1.0. to decrease the transparency (e.g. 0.2 is hazy, 0.5 makes half transparent).
Example of adding a background image with a specified opacity:
In the example above, the image has 50% opacity.
CSS Background Image – With HTML Example Code
What a user sees on a website will impact how good their user experience is. It will also affect how easily they can use the whole site in general.
Adding images to the background of certain parts of a website is often more visually appealing and interesting than just changing the background-color.
This article explains how to add images to your HTML code and how to then fine-tune them to look better.
Background Image Syntax
The first step is to make sure you create an assets directory (folder) to hold the images you want to use in your project.
For example we can create an images folder in the project we are working on and add an image called sunset.png that we want to use.
The background-image CSS property allows you to then place the image behind any HTML element you wish.
This could either be the whole page (by using the body selector in CSS which targets the element in our HTML), or just a standalone specific part of the page such as a section element like in the example below.
Let’s discuss what’s going on here in detail:
How to Stop Background Repeat
When you apply a background image to an element, by default it will repeat itself.
If the image is smaller than the tag of which it’s the background, it will repeat in order to fill in the tag.
How do we stop this from happening?
The background-repeat property takes in 4 values and we are able to change the direction in which the image repeats, or stop the image from repeating itself all together.
This is the default value if we don’t give the background-repeat property a value. In this case the image is repeated both horizontally and vertically so in both x-direction and y-direction respectively until it fills the space.
The no-repeat value stops the image from repeating itself from all directions. The image is only shown once.
How to Set Background Position
After adding a background image and stopping it from repeating, we are able to further control how it looks within the background of the tag by improving its position.
We’ll use the background-position property to do this.
The selector takes in two values. The first one is for the horizontal position, or x-direction (how far across the tag). The second one is for the vertical position, or y-direction (how far down the tag).
The values can be units, like a pair of pixels:
This will move the image 20px across and 30px down the containing tag.
Instead of pixels we can use a set of keywords like right, left, top, down, or center to place the image at the right, left, top, down, or center of the tag.
This places the image at the right hand side of the center of the tag.
If we wanted to center it both horizontally and vertically, we would do the following:
To position an image with finer detail, it is worth mentioning that we can use percentages.
This positions the image 20% across the tag and 40% down the tag.
How to Resize a Background Image
To control the size of the background image we can use the background-size property.
Again, like the previous properties mentioned, it takes in two values. One for the horizontal (x) size and one for the vertical (y) size.
We can use pixels, like so:
If we do not know the exact width of the container we are storing the image in, there is a set of specific values we can give the property.
The rule background-size:cover; in this case will crop of parts of the image 
When we change it to background-size:contain; we see that the image shrinks to fit the section tag.
How to Use the Background Attachment Property
With the background-attachment property we can control where the background image is attached, meaning if the image is fixed or not to the browser.
See the Pen by Dionysia Lemonaki (@deniselemonaki) on CodePen.
Background Gradients
A different use case for the background-image property is for telling the browser to create a gradient.
The background-image in this case does not have a URL, but a linear-gradient instead.
The simplest way to do this is to specify the angle. This controls the direction of the gradient and how to colors will blend. Lastly add two colors that you want blended together in a gradient for the tag’s background.
A gradient that goes from top to bottom and from black to white is:
The most common degrees used for gradients are:
See the Pen by Dionysia Lemonaki (@deniselemonaki) on CodePen.
Instead of keyword colors we can use hex colors to be more particular and have a wider range of options:
See the Pen by Dionysia Lemonaki (@deniselemonaki) on CodePen.
We can also include more than two colors in a gradient, creating different affects and color schemes.
Conclusion
This marks the end of our introduction to the basic syntax of the background-image property.
From here the possibilities are endless and leave room for a lot of creative expression. These effects help the user have a pleasant experience when visiting your website.
I hope this was helpful, and thank you for reading.
Have fun with your designs and happy coding!
How to add background image in css?
I want to add background image in my css code but it’s not loading. How to change or add background image in css please help I’m written css code in notpad++
4 Answers 4
Trending sort
Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.
It falls back to sorting by highest score if no posts are trending.
Switch to Trending sort
Please try Above type of code in your css section.
you can add that as this.
if you have class
you can use background function also. if you add background css function,you should have to change width and height
This is the path u should specify, The way to copy the path is to go the directory where the image is present, then copy path there.
If you want to add an image as background-image in CSS, there are two ways of doing it:-
Not the answer you’re looking for? Browse other questions tagged css or ask your own question.
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
CSS Background Image – How to Add an Image URL to Your Div
Say you want to put an image or two on a webpage. One way is to use the background-image CSS property.
This property applies one or more background images to an element, like a
Add an Image
It’s easy to add an image using the background-image property. Just provide the path to the image in the url() value.
The image path can be a URL, as shown in the example below:
Or it can be a local path. Here’s an example:
Add Multiple Images
You can apply multiple images to the background-image property.
That’s a lot of code. Let’s break it down.
Separate each image url() value with a comma.
Now position and enhance your images by applying additional properties.
See what it looks like when we put everything together.
Order Matters
The order that you list your images in matters because of the stacking order. That means the first image listed is nearest to the user, according to the documentation. Then, the next one, and the next, and so on.
Here’s an example.
We’ve listed two images in the code above. The first image (morocco-blue.png) will be in front of the second (oriental-tiles.png). Both images are the same size and lack opacity, so we only see the first image.
But if we move the second image (oriental-tiles.png) over to the right by 200 pixels, then you can see part of it (the rest remains hidden).
Here’s what it looks like when we put everything together.
When Should You Use Background Image?
There’s a lot to like about the background-image property. But there’s a drawback.
The image may not be accessible to all users, the documentation points out, like those who use screen readers.
That’s because you can’t add textual information to the background-image property. As a result, the image will be missed by screen readers.
Use the background-image property only when you need to add some decoration to your page. Otherwise, use the HTML element if an image has meaning or purpose, as the documentation notes.
That way, you can add text to an image element, using the alt attribute, which describes the image. The provided text will be picked up by screen readers.
Think of it this way: background-image is a CSS property, and CSS focuses on presentation or style; HTML focuses on semantics or meaning.
When it comes to images, you’ve got options. If an image is needed for decoration, then the background-image property may be a good choice for you.
I write about learning to program and the best ways to go about it (amymhaddad.com).
Programmer and writer | howtolearneffectively.com | dailyskillplanner.com
If you read this far, tweet to the author to show them you care. Tweet a thanks
Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)
Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.
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
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
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.