I can't set background image

HTML-CSS
1

Hi!
CSS

.solution1 {
    background: url("https://scontent-frx5-1.xx.fbcdn.net/v/t1.0-0/q92/p526x296/26230297_160544681336798_1685384360638587870_n.jpg?oh=b65e28b26251f2ff876e3caa5bcea755&oe=5B3ACC0D");
background-size: cover;}

HTML

div class="solution1"
    </div>

Why? :sweat:
https://codepen.io/Novumel/pen/ZxBMmN?editors=1100

2

That does not appear to be a valid image url.

5

The problem is, div has no dimensions. I see that you are using Bootstrap, you can just add a class container to your solution1 = >

`<div class="solution1 container"></div>`

Or if you want a full page width:

<div class="solution1 container-fluid"></div>

More info on container and container-fluid: Click me

Without Bootstrap you can specify your own width and height for example:

.solution1 {
    background: url("https://scontent-frx5-1.xx.fbcdn.net/v/t1.0- 
    0/q92/p526x296/26230297_160544681336798_1685384360638587870_n.jpg? 
    oh=b65e28b26251f2ff876e3caa5bcea755&oe=5B3ACC0D");
    background-size: cover;
    height: 600px;
    width: 50%;
    margin: auto;
}

You can see the height and width parameters.
Change Height to your liking, you can change width to 100%(spans the whole website),
margin: auto; is there to center the image.
You can also add background-repeat: no-repeat; more info =>background-repeat.

1 Like
6

I’m ashamed, but I couldn’t make the background. I applied all the tips, but the picture only appears on the line containing the symbol.

7

Dear, I did as you said, but the background is still not visible. That is, only visible to the line with the symbol :persevere:

8

Well in this case instead of using % you should use vw or vh something like that.
css values and units
So basically instead of % just use 100vh and it works.

1 Like