Change visible part of background image based on screen size using CSS

1375 views javascript
4

I think this horribly done ascii art should show you better than words:

On Large screens:

________________
|***************| 
|*             *|
|*             *|
|*             *|
|***************|
-----------------

On small screens:

***************
*    ----     *
*    |  |     *
*    |--|     *
***************

The * is a background image, the solid - and | represent the visible screen size.

The background image size never changes, just what is visible of it.

Not against javascript or pure css, but would prefer not to use any other frameworks. Pure, simple and sweet.

Thoughts?

answered question

Please add some real examples, the question is difficult to understand.

e.g. background-size:1000px; background-position:center;

1 Answer

6

You can use @media to set the break point of your css. It is use to make webpage responsive which is what you want (to change css of background image on the basis of screen size) You can read more about this here



A little example is here. Normal css will be same for all but when screen size is bellow 1200px then width will be 100% and when it is below 800ps then size of image will be 80% in this way you can adjust specific class/tag/id

   @media only screen and (max-width:1200px){


    .background-image{
        width: 100%;
        padding: 0 2%;
        }

}

@media only screen and (max-width:800px){


    .background-image{
        width: 80%;
        padding: 0 2%;
        }

}

posted this

Have an answer?

JD

Please login first before posting an answer.