CODEWITHSUNDEEP
htmlcss
Liondancer
Liondancer

Reputation: 16479

Sizing background image CSS

I am trying to include a background image to my HTML header but it is not working the way I want it to.

Header:

<header class="background_image">

</header>

Currently the image only appears when my CSS is like so:

.background_image {
    background-image: url(image-path("header-bg.jpg"));
    height: 500px;
}

even then only a portion of the image is displayed

I've looked around and tried adding different combinations CSS properties such as:

background-size: auto;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: center center;

But each one of them has the imagine in a very thin line. At first I thought the image wasnt being loaded but I think only a sliver of it is being shown which I assume is the thin black line

Upvotes: 0

Views: 86

Answers (2)

Stef
Stef

Reputation: 341

I think you have answered your own question, the < header > needs to have a height property to apply a visible background image.

Standards suggest it is not possible to auto adjust a selector to background image size just using CSS ... if that is what you are after.

That being said, depending on the rest of your layout ... check out this snippet (also on jsfiddle):

div{
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * width) */
                /* (853 / 1280 * 100) */
}
<div></div>

Upvotes: 3

Josh Burgess
Josh Burgess

Reputation: 9567

What's up with the image-path("header-bg.jpg")?

That would be my guess. The proper formatting for an image in CSS is this:

background-image: url(path/to/image.png);

As seen in this example:

.background_image {
    background-image: url(http://placehold.it/1200x500); // <-- This right here.
    height: 500px;
}

Also, if it's just that the header's cutting off your image, I highly recommend you take a look at the background-size non-numerical properties, such as contain and cover

Upvotes: 1

Related Questions