CODEWITHSUNDEEP
htmlcssangular
itsikha
itsikha

Reputation: 82

Add multiple backgrounds on a angular component and keep them aligned to each other and responsive

enter image description hereI am working on a promo site with angular 7, the designer gave me 2 background pictures that complete each other, 1 of them is a real footage with a highlighted part (already in the photo) that should be aligned with the other background. 1) What i should do in order to align between the two and make them responsive. also should i use img tag or background css. 2) What is the better approach for this kind of issues (should i ask the designer to give me the full background with all elements?)

The last thing i tried is using the img tag which was fine until i added some text with z-index to be on top of the image. i used position: absolute and position:relative in order to insert the elements on top of the background but that scramble everything. Here is the html:

<div class="main-page-container">
    <div class="join-company-container">
        <img src="assets/img/photo-bg.jpg" class="responsive" alt="Standing">
        <app-join-company class="app-join-company"></app-join-company>
    </div>
    <div>
        <img src="assets/img/rectangle-fill-left.svg" class="responsive-image-left" alt="Smiley face">
    </div>
</div>

Here is the css:

.main-page-container {
  height: auto;
}

.responsive {
  width: 100%;
  height: auto;
  z-index: -1;
  position: absolute;
}


.responsive-image-left {
  width: 29.2%;
  height: auto;
  z-index: -1;

}

.app-join-company {
  position:relative;
  z-index:1;
}

** app-join-company - is the component that has the text + other elements on top of the first background.

Upvotes: 0

Views: 920

Answers (2)

Anand Khandalekar
Anand Khandalekar

Reputation: 26

Inside the body, pass the urls of the background images separated by commas, set the size of each image in the background-size property (separated by commas). Position the background images as needed using the background-position property by setting the top/bottom and left/right for each image (the first value sets the position of the first image and so on).

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;

  background-position:
    top 16vh left -9vw,
    top 77vh left 24vw,
    top -30vh right -10vh,
    top 91vh right 8vw,
    bottom -126vh left 0em
  ;
  
  background-size: 30%, 20%, 56%, 25%, 100%;
  background-repeat: no-repeat;

  background-image: 
    url('/assets/images/img1.svg'),
    url('/assets/images/img2.svg'),
    url('/assets/images/img3.svg'),
    url('/assets/images/img4.svg'),
    url('/assets/images/img5.svg')
  ;
}

Upvotes: 0

Berci
Berci

Reputation: 3386

Please note that you don't have any class app-join-company . Only a component called like that (you only have class join-company-app ). I am guessing there is the text. But the text is not actually positioned relative due to the typo.

Also you don't use the class responsive-image-right anywhere.

In adition to this z-index only works on positioned elements(position: absolute, position: relative, position: fixed, or position: sticky). So it won't work for .responsive-image-right or .responsive-image-left.

Upvotes: 1

Related Questions