To put an image as a background in CSS seems a little overwhel | Programming Diaries
To put an image as a background in CSS seems a little overwhelming since the images position won't be as perfect as we want it. Whether to put an image on a specific part of the screen or to cover the whole screen as a background, following a little rule would make it a lot easier.
For a full background we would put the property on the body tag, so it can can be applied through the whole page, but that is not a good idea to do that if we are building a website that we actually scroll. In order for that to happen we need to wrap the whole thing in a div or a section tag. And give that a class or an id and give the property using css. The property on the css on an element that has a class of showcase would look like..
.showcase{ background: url('./showcase.jpg'); //the image must be on the same directory...if it was on another folder we would have to change the url. If that is hard, contact me through @jamesScript i would personally guide you through that.
.showcase{ Background: url('showcase.jpg'); background-size: cover; //makes the image not be cropped Background-repeat: no-repeat; //this would make the image not get repeated and look horrendous. Background-position: center; //this will position it at the center height: 100vh; //this would give it the height of the whole screens, if you consider the screen as a 100 slices saying 100vh means saying 100 slices, saying 50vh means half the screens half slice.. These properties would position the image as the screen background..
Welcome to programming Diaries. To find different articles, resources, blogs, questions, tutorials, books and many more about various programming languages. Contact @jamesScript for info @diaryOfaProg...