CSS Positioning/ Handling Images CSS

Question 1

How can you centre images and how do you add a background image to an element?

Answer 1

.main {
display: block;
margin 0 auto;
}

h1 {
background-image: url(“link”);
}

Question 2

Sometimes when you add an background image, the image can repeat itself, how can you change this? When the image is changed to not repeated, it’s position can be modified, how can you do this?

Answer 2

h1 {
  background-image: url("link");
  background-repeat: no-repeat;
  background-position: center bottom;
}

Background position values:

3x3 grid (left top - right bottom)

Question 3

How can you add an liner gradient color to the background of an element?

Answer 3

.btn {
background-image: -webkit-linear-gradient (#, #);
}

Question 4

How do you know when to add an image to a webpage between the background property in CSS, or with img element in HTML?

Answer 4

If you want to add an image that is part of the content of a web page such as: logos, icons, album photos etc. then use the <img></img> element.

If you want to add an image, solely to style the page better, then the background-image property in CSS is the better option.

Question 5

How can you change the position of block level elements on a web page and what are the four values of this property? Also, how can you change the position of block level elements on a web page and what are the four values of this property?

Answer 5

h1 {
  position: fixed
  top: 20px;
  bottom: 20px;
}

Four values:

fixed - When set to fixed, an elements position can be pinned to any part of the web page, the element will remain in view no matter what
relative - the relative value allows you to position an element relative to its default static position on the web page (left).

absolute - All other elements on the page will ignore the element and act like it’s not present on the page

static - The default position of a block element

Question 6

When there are multiple boxes on web page with different positions, the boxes (plus their content) can overlap with each other, how can we fix this?

Answer 6

.header {
z-index: 1;
}

.welcome {
z-index: 2;
}

Question 7

If you want to simply move an element all the way to the right or left, how can you do this?

Answer 7

.welcome {
float: right;
width: 100%
}

Crucial that the width is set, for the float property to function properly

Question 8

When multiple elements are floated and have different heights, it can affect their layout on the page. Specifically, elements can bump into each other and not allow other elements to properly move to the left or right. How can you work around this?

Answer 8

.welcome {
clear: both
}

values:

• left
• right
• both
• none