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
• 10,120 points
42 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
• 9,540 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
• 9,540 points
20 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
• 9,540 points
26 views
0 votes
1 answer

How to overlay image with color in CSS?

Use the rgba() Function to Overlay Background ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
25 views
0 votes
1 answer

How to make div background color transparent in CSS

To begin, we will build a div> ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
96 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,740 points
723 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
• 11,280 points
70 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

Jun 30 in CSS by Edureka
• 10,120 points
8 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
• 9,540 points
17 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
• 9,540 points
52 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
• 9,540 points
38 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