All Articles

Miniter[01] Position, Background-

I joined a coding bootcamp called WeCode which is based in Seoul, South Korea. For my first project, I am making a mini-version of Twitter with sign-up, log-in, and making tweets. The end product would look something like this.

Final Picture of Miniter

I got to use position and background- properties to make my page. position is a common property that a front-end developer uses when he or she tries to set a layout for the webpage. I had a hard time trying to understand the difference between absolute and relative. Just like any other front developers would do, I changed the property to see how they work, but it was difficult to see it right away. Below is a picture that really helped me understand the difference between absolute and relative

absolute and `relative source

absolute : Positioning an element based on its closest positioned ancestor position. So basically you are placing your element based on its parent element and changing the layout around it.

relative : Positioning an element based on its current position without changing layout.

background- properties: I was trying to insert an image as a background-image instead of using an img tag/element.

Background-Image Used

Below is the CSS I wrote for this.

.blueCircle {
  background: #0099ff;
  position: absolute;
  left: 12%;
  top: 35%;
  border: 5px solid white;
  height: 100px;
  border-radius: 50%;
  width: 100px;
  background-image: url(https://scontent-hkg3-1.xx.fbcdn.net/v/t1.0-9/62072328_10219032446142995_4385081662694752256_n.jpg?_nc_cat=103&_nc_ht=scontent-hkg3-1.xx&oh=27926ae25a7eb38a36b18114643a4edc&oe=5D98939C);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

position: absolute; was used in order to place the image based on the blue box in the image above.

background-img: url(link); was used in order to insert the image.

background-repeat: no-repeat; background image is repeated vertically and horizontally by default. you can set its property as repeat-x to have your image repeated only horizonatlly or repeat-y to have it vertically. no-repeat prevents image repetition.

backround-size: 100%; makes the image fill the given space set by height and width.
background-size: cover; expands the image to fill the entire space. If the given space is too small compared to the size of the image, it might cut out most of the image.
background-size: contain; manipulates the size of the image to show the entire image within the given space.

background-position: center; puts the image at the center of a given space.

Jun 5, 2019

AI Enthusiast and a Software Engineer