CODEWITHSUNDEEP
css
black_belt
black_belt

Reputation: 6799

How to adjust the size of background image with browsers window using media queries

I have a background image in my website. I want to adjust the size of the my background image with browsers window using media queries. I am new to the concept of media queries, could you please show me how to that?

Thanks :)

In my CSS file:

.homepage{background-image:url(../images/work.jpg); background-repeat:no-repeat;}

In my HTML file

<body class="homepage">

</body>

Upvotes: 0

Views: 293

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157374

You need to use a media query in your style sheet for specific screen resolutions say for example

@media all and (max-width: 1200px) and (min-width: 520px) {
  body {
    /* Now whatever styles you use here will be applicable for your specified screen widths */
  }
}

So coming to your issue, I assume you want your background of the body to auto adjust according to screen resolutions, you can try this, without using media queries..

html { 
    background: url('/* Path to image file */') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Upvotes: 1

Related Questions