How to use CSS media query to scale background-image to viewing window

0 votes

For the background of a website, I have this sizable picture:

body {
    background: #000 url(/assets/img/living.jpg) no-repeat center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
}

However, the background-attachment: fixed setting doesn't seem to be having the same impact on my mobile device (iPhone 4S running Safari) as it would on a desktop. Can I use a media query to change it and why is that the case?

Jun 17 in CSS by Edureka
• 7,940 points
11 views

1 answer to this question.

0 votes
If you only want the desktop version of the image to be downloaded...

just the mobile image will be downloaded to the mobile device -

To establish a minimum browser width for the desktop image, you must use a min-width declaration...

as well as a maximum width for the mobile image
answered Jun 17 by Edureka
• 8,460 points

Related Questions In CSS

0 votes
1 answer

How to hide image broken Icon using only CSS/HTML?

Because CSS/HTML has no means of knowing ...READ MORE

answered May 31 in CSS by Edureka
• 8,460 points
14 views
0 votes
1 answer

How can I use CSS to style multiple images differently?

You can do that in HTML (delete ...READ MORE

answered Jun 21 in CSS by Edureka
• 8,460 points
8 views
0 votes
0 answers

How to overlay image with color in CSS?

I want a color overlay on the ...READ MORE

1 day ago in CSS by Edureka
• 7,940 points
2 views
0 votes
0 answers

How to make div background color transparent in CSS

I'm not using CSS3. So I can't ...READ MORE

1 day ago in CSS by Edureka
• 7,940 points
9 views
0 votes
1 answer

Media Queries: How to target desktop, tablet, and mobile?

I would personally believe that these are ...READ MORE

answered Feb 11 in Others by Soham
• 8,730 points
399 views
0 votes
0 answers

@Media min-width & max-width

I have this @media setup: HTML: <head> <meta name="viewport" content="width=device-width, ...READ MORE

May 7 in Others by narikkadan
• 10,840 points
54 views
0 votes
1 answer

Making a dotted grid with CSS

You can use the background-position CSS property to do ...READ MORE

answered May 31 in CSS by Edureka
• 8,460 points
11 views
0 votes
1 answer

Make an image responsive - the simplest way

You can try doing <p> <a href="MY ...READ MORE

answered Jun 21 in CSS by Edureka
• 8,460 points
4 views
0 votes
1 answer

When to use IMG vs. CSS background-image?

You can transition a div's background image ...READ MORE

answered Jun 10 in CSS by Edureka
• 8,460 points
16 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27 in CSS by Edureka
• 8,460 points
24 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP