CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbackground-image
Tal
Tal

Reputation: 365

Responsive background image of div

I have the following HTML:

<body>
        <div class="container">
            <div class="page-header">
                <div class="masthead">
                    <div class="header-image"></div>

Which is using Bootstrap 3.3. I want to set a header image which will be used as a banner and will be responsive as much it possible. I set header-imageclass and I gave it these properties:

.header-image {
    background-image: url("../images/amazingimage.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
}

But I can't see the image at all. Please help me, thanks.

UPDATE: Here is a fiddle: http://jsfiddle.net/qnsnnf9s/

Upvotes: 0

Views: 408

Answers (3)

pourmesomecode
pourmesomecode

Reputation: 4368

http://jsfiddle.net/qnsnnf9s/1/

Heres a slight change to what you wanted. Did you want your navigation to be within the banner image or not?

.header-image {
    background-image: url("myimageURL");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    z-index: 99;
    width: 100%;
    height: 100px;
 }

A general rule: Always use pixels when working with heights and always use percentages when using widths. You can't build responsive correctly and efficiently when your working with widths in pixels. Please comment with your answer to the question above and i'll edit the jsfiddle with anything you need changing/updating.

Upvotes: 1

marquez
marquez

Reputation: 737

height and width need to be setted.

I also suggest you to use the background-size: cover property to scale the image and always fill the available space.

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

.header-image {
    width: 100%;
    height: 100px;
    background-image: url("youreimage");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Here the updated fiddle http://jsfiddle.net/qnsnnf9s/3/

Upvotes: 0

Jordan Davis
Jordan Davis

Reputation: 1520

//CSS BLOCK

.header-image {
    height: 500px; //RESPONSIVE USE (%,em, or vh/vw)
    width: 500px; //RESPONSIVE USE (%,em, or vh/vw)
    background: url("../images/amazingimage.png") no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    background-position: center center;
    -webkit-background-position: center center;
}

Upvotes: 0

Related Questions