how to set background image size code example

Example 1: background image size css

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: auto;
}

#example2 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 300px 100px;
}

Example 2: how to change the width of a background image in css

#example1 {		/* Example1 has an auto background size */
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: auto;
}

#example2 {		/* Example2 has an fixed background size */
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 300px 100px;
}

Example 3: html background size fit text

<div class="myDiv">
    <div class="bgImage">
        <h1>My Image</h1> 
    </div>
</div>

<style>
.myDiv {
	text-align: center;
}
.myDiv h1 {
  display: inline-block;
  font-size: 3.5em;
  border-radius: 20px;
  background: rgba(43, 166, 203, 0.5); /* alpha value for background */
  padding: 0.5em 0.2em 0.8em 0.5em;
}
</style>

Tags:

Css Example