CODEWITHSUNDEEP
htmlcss
user9311405
user9311405

Reputation:

CSS Background Image not appearing on website

I'm building a website from CSS and HTML. I'm up to the point of adding a background image to my website. The trouble is, the image isn't showing up as the website's background.

My CSS code:

.bg {
  background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
  height: 50%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: repeat-x;
  background-size: cover;
}
<div class="bg"></div>

Just ask me if you need any more code from my website.

Edit: This is not a clone, I've tried every other solution that I've come across on here, and nothing works.

Upvotes: 2

Views: 219

Answers (4)

slevy1
slevy1

Reputation: 3820

The image that the OP refers to is a resized version of the original. This solution uses the original image along with CSS that uses a height of 100vh (as recommended by @weBBer) and auto for the width. The background position remains with a center value. It seems needless to repeat the image so the CSS uses no-repeat. This works with Google Chrome (version 49).

.bg {
  background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
  width:auto;
  height:100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
}
<div class="bg"></div>

The result is a centered image that fills the page due to background-size property being set to cover as well as the height property set to 100vh, i.e. 100% of the view port height; see more about this and other measurements here.

If you only wanted to fill the portion within the dimensions of the DIV then you could alter the CSS and replace background-size property with object-fit, as follows:

.bg {
  background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
  height:480px;
  margin-left:auto;width:100%;margin-right:auto;
  background-position: center;
  background-repeat: no-repeat;
  object-fit:cover;
  
}
<div class="bg"></div>

Upvotes: 0

Okasha Rafique
Okasha Rafique

Reputation: 772

If you want to add background image to whole HTML Page then use body tag.

body {
    background-image: url("https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg");
}

and if you want to add background to specific class then use this

.bg {
    background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg');
}

in that adjust your height accordingly. if you want to add to full class then use height:100% else adjust it with your own condition.

Upvotes: 0

Ria Anggraini
Ria Anggraini

Reputation: 2655

The background image for a page can be set like this:

body {
    background-image: url("paper.gif");
}

so maybe you can change your code become :

  .bg {
    background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
    height: 100px;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
  }

Upvotes: 0

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

This works fine if you use fixed height:

In the below case I have used 100px;

  .bg {
    background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
    height: 100px;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
  }
<div class="bg">

</div>

But if you want it to be 100% of the screen you can always go with 100vh

.bg {
  background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
  height: 100vh;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: repeat-x;
  background-size: cover;
}
<div class="bg">

</div>

If you want to know more about vh visit this link

Hope this was helpful for you.

Upvotes: 1

Related Questions