1.How do I change the image size for the background url depending on screen size?

<main id="main">


    <section class="uvsbg text-center">
  <div class="container" data-aos="fade-up" style="height:950px;">

    <div class="row" style="background: url('assets/img/contact-bg5.jpg'); background-size: 100% 100%; position: relative; height: 850px;">
    
<div class="col-md-12"> <h1 style="color:#fff;text-align:center;margin-top:50px;font-size: 52px;">Contact Us

CodePudding user response：

There are several ways you could do that.

If you are interested in the background being the full size of the element, replace the style attribute of the row div with this: (Source)

  background: url(assets/img/contact-bg5.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

Otherwise, you would have to use Javascript to do this if you do not want the background to be the full width of the element. (You can learn a bit about this here)

CodePudding user response：

Use CSS media queries. Replace the inline-CSS with a class and add the CSS to an external file or using internal CSS.

<main id="main">
  <section class="uvsbg text-center">
    <div class="container" data-aos="fade-up" style="height:950px;">
      <div class="row" class="change-bg-image">
        <div class="col-md-12"> <h1 style="color:#fff;text-align:center;margin-top:50px;font-size: 52px;">Contact Us

.change-bg-image {
  background: url('assets/img/contact-bg5.jpg'); 
  background-size: 100% 100%; 
  position: relative; 
  height: 850px;
}

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

  .change-bg-image {
    background-size: 50% 50%; 
    position: relative; 
    height: 400px;
  }

}
 

CodePudding user response：

you can use these values as well

background-size: auto|length|cover|contain|initial|inherit;

@media screen and (max-width: 992px){
  .row{
    background-size: 50% 50%;
  }
}