CSS: Set background-size: cover property to cover div instead of whole screen

2
votes

I understand that the background-size: cover property in CSS makes the background image as large as possible so that it covers the entire screen. However, because this can distort the image on larger screens, I want to be able to make the background image cover the width and height of the div container that it's in, rather than the width of the whole screen. I'm not sure how to do this. Even when placing my image inside a div in my HTML, the background-size: cover property still expands the image to the whole screen.

My CSS is:

.main {
  height: 30vh;
  text-align: center;
  background: url("https://i.imgur.com/6FYizew.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover
}

My HTML is:

<div class = "container" style = "padding-top: 5vh">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class = "active hidden-xs"></li>
  </ol>
  <div class="carousel-inner">
<div class="item main active">
    <div class = "hidden-xs" style = "width: 80%; max-width: 1200px; margin: auto; position: relative; top: 15%; padding-top: 30px; padding-bottom: 40px; background-color: rgba(255, 255, 255, 0.8);">
        <h1 class = "hidden-xs" style = "font-size: 5em; font-weight: normal; color: #0b3c5d; font-weight: bold">TITLE</h1>
        <hr class = "intro-divider hidden-xs" style = "width: 550px; background-color: #232f3f">
        <h4 class = "hidden-xs" style = "margin-top: 15px; font-size: 1.5em; color: #232f3f"><em>SUBTITLE</em></h4>
    </div>
</div>

Please let me know how I can set cover to cover just a container instead of the entire screen. Thanks!

2
htmlcss
can you fiddle here – Chandra Shekhar
Update your html code here.actually if we put that background image in a css class and then if we called it from division it will display only in that division.I hope i can help you – Sumith Chalil
@SumithChalil I added my HTML above. What exactly do you mean by calling the division? – M. Ying

2 Answers

0
votes

you didn't set width... add width size and it will only cover .main div

if you didn't set width in div then it's use auto width property which means your div cover whole remaining place ...currently your main div cover whole pages that is why you see background image on whole page

0
votes

enter image description here

you want to display the background to container division <div class="container"> and here you are not calling the background image to that class and also if you inspect the element you can see that your container division is filling whole the screen. so just go through the screenshot above ,if we add the image to container division then it will looks like above.If you are looking for that then just add a style to container class as follows

<style>
.container {
  background: url("https://i.imgur.com/6FYizew.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover
}
</style>

i think is not what you are exactly looking for ,so just draw a layout in a paper and send it,we can do it.