Skip to main content

How to add a background image in css


 

The background-image property in CSS is employed to line a picture because the background of a component . Using this CSS property, we will set one or quite one background image for a component .


By default, the image is positioned at the top-left corner of a component and repeated both horizontally also as vertically. The background image should be chosen consistent with the text color. The bad combination of text and background image could also be a explanation for poorly designed and not readable webpage.


The url() value of this property allows us to incorporate a file path to any image. it'll show the element's background. we will use multiple images or a mix of gradients and pictures for the background. If the background-image is did not load or if we are using the gradients, but they're not supported on the corresponding browser then, we will use the fallback value (the value used because the substitution) because the background color of the element.


syntax:

  1. background-image: url();  


Example:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <style>    
  5. body {    
  6.   background-image: url("cat.png");  
  7.   background-color: lightgray;  
  8.   }  
  9. </style>    
  10. </head>    
  11. <body>    
  12. </body>    
  13. </html>  




output:
output will be image of cat

Comments

Post a Comment

Popular posts from this blog

Eduford HTML and CSS dynamic website template free with source code

               For more templates please subscribe the blog and share it             For more templates please subscribe the blog and share it                    For more templates please subscribe the blog and share it           For more templates please subscribe the blog and share it           For more templates please subscribe the blog and share it                                       DOWNLOAD TEMPLATE
Post a Comment
Read more

Why do front-end developer need a CSS framework?

  CSS frameworks have their downsides. So you would like to know whether you would like one or not. Here are a couple of strong arguments for using the frameworks: To build a website/web application faster You can save time by having a solid foundation that you simply can believe . CSS frameworks give web developers something that they're going to use and customize (if required). And for people who have limited coding skills, employing a CSS framework is that the sole because of create a solid product. To validate the planning hypothesis You can build an answer and test it together with your users. it's much faster and easier to make a prototype or wireframe with a framework instead of roll in the hay from scratch. PS：Designers also can create prototypes/wireframes employing a rapid prototyping tool. CSS frameworks works as per your needs There are tons of great frameworks you'll choose between . such as: Bootstrap Materialize Bulma Semantic ui Foundation
Post a Comment
Read more

What is Firebase ?

Developing a booming app isn't easy to reach a broad audience; There are various devices in the world, and every device comes with a different screen size; you'll need to consider your app runs comfortably for all users using iOS, Android, and the web, and to build this application you need a backend. If you already own an application, that has lots of users Your users get logged in to your app, which means your backend will have to scale, and then after you solve your scaling problem you have to find more ways to spread the word to get fresh users. But you have to measure all these activities When you get lots of users and your app is not able to tolerate that situation, then it will crash and cause a service meltdown. This is why Firebase was developed It has all the tools that you need to build your successful app. It helps you reach new users, keep them engaged scale up to meet that demand, in addition to getting paid from beginning to being in firebase, you will have a Tes...
Post a Comment
Read more