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, 2022 in CSS by Edureka
• 13,620 points
1,010 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, 2022 by Edureka
• 12,690 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, 2022 in CSS by Edureka
• 12,690 points
3,346 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, 2022 in CSS by Edureka
• 12,690 points
1,769 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, 2022 in CSS by Edureka
• 12,690 points
600 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, 2022 in CSS by Edureka
• 12,690 points
1,720 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, 2022 in Others by Soham
• 9,700 points
3,883 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, 2022 in Others by narikkadan
• 63,420 points
493 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, 2022 in CSS by Edureka
• 13,620 points
343 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, 2022 in CSS by Edureka
• 12,690 points
1,497 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, 2022 in CSS by Edureka
• 12,690 points
658 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, 2022 in CSS by Edureka
• 12,690 points
353 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP