CODEWITHSUNDEEP
csstwitter-bootstrapbackground-image
Leo Stein
Leo Stein

Reputation: 157

Background image on mobile Bootstrap CSS

I've got 3 rows: top, middle, bottom divs. In the top and bottom divs, there's a foreground image and in the middle div there's a background image.

On mobiles, the middle div doesn't not resize like the top and bottom and is way too large. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <img src="img/top.jpg" width="640" height="582" alt="" title="" border="0" />
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12" style="background:url('img/middle.jpg') no-repeat; height:245px;">
            Hello world.
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <img src="img/bottom.jpg" width="640" height="314" alt="" title="" border="0" />
        </div>
    </div>
</div><!--/.container-fluid -->   
</body>
</html>

Is there a way to get the div with the background-image to adjust to the screen?

Upvotes: 0

Views: 9302

Answers (1)

RaphaelDDL
RaphaelDDL

Reputation: 4480

You can use background-size option.

For e.g.:

    <div class="span12" style="background:url('img/middle.jpg') no-repeat; height:245px;background-size:auto 245px;">
        Hello world.
    </div>

In this example, it will always maintain the 245px. If you want it to maintain the screen width, then it's background-size:100% auto; (or background-size:contain; which is likely the same).

Usage:

background-size: <bg-size-h> [ , <bg-size-v> ]

where <bg-size> can be <length>,<percentage>, auto or simply one worded cover or contain

To maintain aspect-ratio, use auto as one of the options.

For more info, CSS3 Background-Size

Upvotes: 2

Related Questions