CODEWITHSUNDEEP
htmlcssresponsive-design
Matt
Matt

Reputation: 2327

How to make multiple CSS background-images fluid responsive?

I am creating a fluid responsive website that contains multiple sections that incorporate CSS background images. How would I go about making these images fluid responsive? I am aware of how to do this with a standard tag but can't see to figure this out for CSS background images. As you can see below the tags will each contain a background-image in my CSS.

My Site Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
</head>
<body>
    <section id="background-image-one"></section>
    <section id="background-image-two"></section>
    <section id="background-image-three"></section>
</body>
</html>

Upvotes: 1

Views: 4125

Answers (1)

matpol
matpol

Reputation: 3074

You can use background-size which will scale the images this should work on most mobile devices - not on some older desktop browsers though (the usual suspects). This will not shrink the image though so it might worth looking at something like this http://adaptive-images.com/ which can server images of different sizes to devices with different screen sizes. N.B. not different viewport sizes.

Upvotes: 1

Related Questions