CODEWITHSUNDEEP
htmlcss
Hermansen
Hermansen

Reputation: 23

Multiple background images repeated

What I am trying to achieve is having multiple images stacked vertically on a website, so that an image will fill the entire screen.

What I hope for 1920x1080 1000x1080 The magenta is the active screen region. However, I just can't seem to only scale the height of the image. Only the width is scaling. The solutions I have found, break the aspect ratio and crushes the quality of the images used. I would rather scale the image a bit, than break the aspect ratio, therefore the weird scaling in 1000x1080

HTML

<div id="home">
    <div>
        <h1 id="welcomeHeaderOverlay">HermansenDesigns</h1>
        <hr>
        <h3 id="welcomeSubHeaderOverlay">Where code happens</h3>
    </div>
    <img class="img-scale" src="https://picsum.photos/1920/1080/?random" alt="placeholder+image" >
</div>

I have a few of these stacked

CSS

.img-scale {
    background-size: cover !important;
    height:100%;
}

Result The image scales with the proper aspect ratio, however, it makes it full-sized 1920x1080, instead of 100% of the active screen region. And makes it so there is a horizontal scrolling.

The outcome is something like this 1905x1080 500x1080

I have tried various methods, from bootstrap with img-fluid and containers to various tutorials on full-sized background images. I have achieved a solution that works for a 1920x1080* browser, however, it scales horribly.

Sorry for the newbie question.

Is it even possible in pure css, or do i need some js or jquery?

Upvotes: 2

Views: 51

Answers (2)

Temani Afif
Temani Afif

Reputation: 274235

Maybe you are looking for something like this:

body {
 margin:0;
}
div {
  height:100vh;
  background-size:cover;
  background-position:center center;
}
<div style="background-image:url('https://picsum.photos/1920/1080/?random')"></div>
<div style="background-image:url('https://picsum.photos/1920/1081/?random')"></div>
<div style="background-image:url('https://picsum.photos/1920/1082/?random')"></div>

Upvotes: 1

Bjarke Handsdal
Bjarke Handsdal

Reputation: 238

this is only achieved through css, so instead of having and tag you can just have a div tag without the src attribute.

and then in the CSS 

HTML
<div class="scale-img"></div>
CSS
.scale-img {
      /* Set height to some high amount so you can see your image doing as you want*/
      height: 5000px;
      background-image: url("path/to/your/image1920x1080");          
      /* background-size: 1920px 1080px; */
      /* 
         EDIT: A better approach would be to use contain for responsiveness 
      */
      background-size: contain;
      background-repeat: repeat;

}

Upvotes: 1

Related Questions