Having Bootsrap (container) background issues Doing My Tribute Page Challenge on CodePen

1

I am having issues placing the background image inside the container behind the jumbotron using Bootstrap. I am very noob, I will take any suggestions.

2

Hey @soomitt,

You have a semicolon missing at the end of the background-image property in your CSS. Also you can’t use background-size property with background-image. There is a space also between the URL and the brackets. If you want to use background-size then you have to use background property in CSS.

Also if you want the picture to cover the entire area behind the jumbotron then you have to give the background property to the body not #p element, like this:

body { background-image: url("https://www.dramafever.com/st/img/actor_masthead/1922_LeeKwangSoo_82796a.jpg"); }

3

For more clarity, there are 2 CSS properties for backgrounds

  1. background:url() (with this you can define number of other values also, like background color if the image fails to load, background-size, repeat, position etc.)
  2. background-image:url() (allows to define the url of the image only)
4

Hi!

There are some CSS elements you want to use to set a background-image properly. First, you want it to be full screen and stretch when needed. For that, you can use background-size: cover; In addition, you want your image to be centered and not repeated. So, use: background-position: center; and background-repeat: no-repeat;.

So far, your CSS will be:

body {
  background-image: url("https://www.dramafever.com/st/img/actor_masthead/1922_LeeKwangSoo_82796a.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Hope you find this information useful :slight_smile:

5

Thank you for your help, that cleared things up. The space between the brackets had me annoyed. I managed to finish this tribute page challenge. Would you mind checking it out and letting me know if it has the minimum needed stuff?

6

Thanks, for your help. I managed to get the tribute page challenge done. Please give it a quick look to see if it has whats needed from the challenge.

7

Please post a link here

8

Ok, sorry forgot that the link was same as earlier.

Nice job on the page. It meets all the points.

But you have pasted the code for the fonts inside HTML panel. You can paste that code under the Pen Settings. You can access the settings by clicking on gear icon at the top right corner of the panels or the Settings tab at the top right of the page.

Keep on coding!!