Search code examples
cssbackground-imagebackground-size

Change the width of the background image using CSS

I'm having the following code:

#main {
  background: url(../../images/achtergrond.png) center top repeat-y;
}

Is it possible to change the width of the background image?

Solution

  • You can use background-size property to do so...

    #main {
    background-size: 20px 50px;
    /* Other properties goes here */
}

    Where the first parameter is X axis or say for horizontal and the other is for Y axis or vertical.

    So if you want to change the width you need to set the Y parameter to the units you want and the X you can set to auto

    Also, what you are using is a short hand property, I provided you the specific one so that you can get what I did, you can surely integrate the background-size in your short hand declaration.