To add a background-image to a section tag in your. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java. 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. The background-image CSS property allows you to then place the image behind any HTML element you wish. The first step is to make sure you create an assets directory (folder) to hold the images you want to use in your project.įor 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. Four techniques are explored on accomplishing a full page background image that conforms to our exceptions: no white space, scales as needed, retains aspect ratio, centered, and more. In these chapters, you will learn about the following CSS background properties: background-color background-image background-repeat background-attachment. This article explains how to add images to your HTML code and how to then fine-tune them to look better. Modern browsers support a variety of image file types like. In the example below we use vh units, which stands for viewport height (. It will also affect how easily they can use the whole site in general.Īdding images to the background of certain parts of a website is often more visually appealing and interesting than just changing the background-color. Basic example Add background-image via inline CSS. What a user sees on a website will impact how good their user experience is.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |