CSS Background Images

HTML-CSS
1

Hi everyone, I’m currently working on the random quote machine project. Each of the quotes has an author associated with it. Whenever a new quote is generated, a unique class is added to the document.body so that I can change the background url depending on who the author of the quote is. Many of the images appear to be too big, or they are too small and they are repeating. My code is in here. I’m wondering whether the problem is with images themselves or is if it is because of the way my CSS is structured.

2

  1. Move the background declarations up before the @include.

  2. You might want to use height: 100vh; and overflow: hidden; on the body.

  3. You are missing a semicolon on this selector.

body.l {
  @include background;
  background: $l-background /*<--*/
}
1 Like
3

This worked out perfectly, thank you!