Background image is driving me crazy

HTML-CSS
#1

Hi everyone!

I do my survey project and have already made Html-skeleton. Now I start to write CSS for it. But m background image for that page doesn’t show (if I put it as a background image to the form it shows, I tried). I don’t understand why it is so. It’s making me crazy cause I can’t see a problem. It behaves like there is now such an element like body.

There is my code for CSS

body {
  background-image: url("https://i.imgur.com/h6Bpthc.png");
  max-width: 100%;
 }

and there is a Codepen

#2

Click gear icon on the left of CSS and select SCSS preprocessor.

1 Like
#3

this is not how you use variables in CSS:

$text-font: 'Cabin', sans-serif;
$title-font: 'Modak', cursive;

as such, it doesn’t work.

#4

@jenovs Omg!! It was driving me crazy, thank you so so much!!!
@ilenia no, my variables are working ok, the problem was in the SCSS that I should have enabled. But thank you anyway!

#5

the Responsive Web Design doesn’t teach any preprocessors, as such I went with the preconception that you wanted to use vanila css
vanilla css variabels are not like those you wrote there

anyway, glad you found a solution!

1 Like
#6

@ilenia but my problem wasn’t in Variables, it was about background-image that is why I didn’t really understand how it’s related to my problem. I mean I can use both variants for variables, it’s not what was bothering me. But if it’s related somehow please tell me so I would know. Thank you!

#7

leaving the preprocessor on None, and deleting all the instances of the variables, the background appear - there are few cases in which css breaks, this is one of those

#8

@ieahleen Thank you! I changed but there is no big different actually. I mean the both variants (if I use preprocessor and if I delete variables) give the same result. But it’s always good to learn something new.

1 Like
#9