I can't set background image

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

That does not appear to be a valid image url.

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

1 Like

I see no issues with the background image. It is showing up fine once you put some content in the div with class=“solution1”.

One note: You currently have both Bootstrap 3 and 4 added to your CSS settings in Codepen. Pick only one and use that version’s syntax. Otherwise, you may have some strange results. Also, if you actually plan on using the Bootstrap 4 JavaScript file, then you will need to add the jQuery library first along with the popper.js library and of course you would use the Bootstrap 4 CSS library instead of Bootstrap 3.

1 Like

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

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.

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

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

You have only applied the background the the div with class=“solution1”. Did you want the entire page to have the background or just that single div? The div does have the background image. The reason you can not see it, is because you are using a fixed top nav, so the div with class=“solution1” is behind the top nav. If you add the following to your .solution class, you will see it.

margin-top: 55px;
1 Like