Upload Image using CSS only and Decorate it accordingly

Upload Image using CSS only and Decorate it accordingly

CSS pictures should only be used for decoration.

With a meaningful text fall-back, a picture in HTML is designed to give visual significance in context. For browsers and web crawlers, using an A element with no content should be avoided since its content will have a relationship with the link (such as a Google bot).

Here is a quick representation of the Cover image using CSS and How we can make our website attractive

Screen Shot 2021-08-09 at 9.18.57 am.png

1) we have to use the (background-image) property in CSS to upload the image as Cover.

Screen Shot 2021-08-09 at 9.05.23 am.png

Screen Shot 2021-08-09 at 9.20.05 am.png

  • height:90vh [ If we don't mention height property then the image will only display where the content is present]

Screen Shot 2021-08-09 at 9.09.07 am.png

Screen Shot 2021-08-09 at 9.08.58 am.png

  • background-size: cover[ This stops the overflow and attaches the picture to make it possibly center the image]

Screen Shot 2021-08-09 at 9.10.11 am.png

Screen Shot 2021-08-09 at 9.10.14 am.png

  • background-position: Center [ This basically centers the image if we want we can use the top, bottom as per requirement ]