Background Image

Question

Hi, I´m trying to set a background image inside mi css body, but I can´t and I don´t know why.
Mi folders order is:
web project
css
syle.scss
style.css
img
backgroundImage.jpg
index.html

This is mi .scss:

*, *::after, *::before {
box-sizing: border-box;
padding: 0;
margin: 0;

}

body {
background-image: url(../img/backgroundImage.jpg);

.main-container {
height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 15% 70% 15%;
grid-template-areas:
"cabecera cabecera cabecera cabecera"
"principal principal principal sidebar"
"pie pie pie pie";

.main-header {
padding-top: 1rem;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
grid-area: cabecera;
border: 2px solid black;

.logo{
margin-left: 2rem;
margin-top: 1.4rem;
text-transform: uppercase;

}

.main-nav{

ul{
margin-right: 2rem;
margin-top: 2rem;
display: flex;

li {
list-style: none;
margin: 0 0.5rem;

a{
text-decoration: none;
color: black;
cursor: pointer;

}

a:hover{
color: white;
font-weight: bold;
}
}
}

}
}

.main-section {

Answer 1

I am dam sure that image is not set in your background by writing background-image in css.

Instead you have to write following:

background:url("path of image.jpg") center no-repeat;

Answer 2

Miguel Rodriguez Martinez I see, Sololearn issue again....

Answer 3

I'm not sure whether this would work or not:

background-image: url('../img/background Image.jpg');

if that doesn't work in case you can take an image from a website.

Answer 4

NEEL SHAH I tried that before and ir doesn't work too.

Answer 5

background:transparent;
grid-area: principal;
border: 2px solid black;
}

.sidebar-right{
background:transparent;
grid-area: sidebar;
border: 2px solid black;
}

.main-footer {
background:transparent;
grid-area: pie;
border: 2px solid black;
}
}

}

Answer 6

Miguel Rodriguez Martinez you can share the code from Code Playground?

Answer 7

Calviղ
I tried to save the code but the save never ends

Answer 8

Any idea of what is wrong?

Answer 9

Set width and height

Answer 10

Coding Kitty I tried it but it doesn't work

Answer 11

Md. Aktaruzzaman Talukdar to de body? Or the background-image?

Answer 12

Background image

Answer 13

Try again

Answer 14

NEEL SHAH You were absolutly right men. It's work perfectly, thanks!!!

Answer 15

Thanks

Answer 16

Ok

Answer 17

How to put an image as a background tutorial:
https://code.sololearn.com/WA87A25A25A1/#