Hi can you please tell me how to add background image in angular using ngfor slide/grid class is the carousel.
<div class="slide slick-bg s-bg-1" *ngFor="let movie of nowPlaying" style="https://image.tmdb.org/t/p/w500/{{movie?.poster_path}}">
<div class="slider-inner h-100">
<h1 class="slider-text big-title title text-uppercase">{{movie?.title}</h1>
<p data-animation-in="fadeInUp" data-delay-in="1.2">
{{movie?.overview}}
</p>
</div>
</div>
.slick-bg { padding: 100px 0 50px;width:100%; background-size: cover;background-position: center center; background-repeat: no-repeat; height: 90vh; position: relative; z-index: 1;}
.s-bg-1 { background-image: url(../images/slider/slider1.jpg); } // need to add this class url here.. https://image.tmdb.org/t/p/w500/{{movie?.poster_path}}
You need to use the correct angular attribute for adding dynamic background image
<div class="slide slick-bg s-bg-1" *ngFor="let movie of nowPlaying" [ngStyle]="{'background-image': 'url(https://image.tmdb.org/t/p/w500/' + movie?.poster_path + ')'}">
<div class="slider-inner h-100">
<h1 class="slider-text big-title title text-uppercase">{{movie?.title}}</h1>
<p data-animation-in="fadeInUp" data-delay-in="1.2">
{{movie?.overview}}
</p>
</div>
</div>
Just add this style to your html template in oder to make the background images dynamic.
<div [ngStyle]="{background: 'url(https://image.tmdb.org/t/p/w500/' + movie?.poster_path +')', width: '200px', height: '150px'"></div>
Related
I'm new to web dev and am trying to use an image that I get from Contenful content as a cover image within a div without using an <img>. It works well if I set it as a [src] of an <img> tag within my html file but as far as I could see, using it as an img tag:
<img [src]="blogPost.fields.featuredImage.fields.file.url" alt="">
dint give me the sizing and styling I got from using a div with css file styling:
background: url('/assets/img/landscape3.jpg') center 50% fixed no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
height: 50vh;
padding-top: 15rem;
above I used the same image that exist on contentful but it looks more proportioned and sized as I want when i load it from my pc with a src url.
But since the image I want is from an *ngFor block: *ngFor="let blogPost of blogPosts.items"
i have no idea how to set it as a background image of a div without using <img> tag
here is the code I used:
<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" class="main"
*ngIf="blogPosts$ | async as blogPosts">
<div *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science &
Tech'">
<div class="tile">
<div class="title"><p>{{ blogPost.fields.title }}</p></div>
<img [src]="blogPost.fields.featuredImage.fields.file.url" alt="">
</div>
</mat-grid-tile>
This is want I want to try:
<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" class="main"
*ngIf="blogPosts$ | async as blogPosts">
<div class="for" *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science & Tech'">
<div class="tile">
<div class="title"><p>{{ blogPost.fields.title }}</p></div>
<div class="img"></div>
</div>
</mat-grid-tile>
css:
.img {
margin-top: 0px;
background: url('blogPost.fields.featuredImage.fields.file.url') center
50% fixed no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover center 50% fixed no-repeat;}
So is it possible to use the resource im getting im my html *ngFor in my css file? or am I asking the right question when there is an alternative way?
You can bind blogPost.fields.featuredImage.fields.file.url property to inline style background of div with img class.
The following HTML code would work for you:
<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" class="main" *ngIf="blogPosts$ | async as blogPosts">
<div class="for" *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science & Tech'">
<div class="tile">
<div class="title">
<p>{{ blogPost.fields.title }}</p>
</div>
<div class="img" [style.background]="'url(' + blogPost.fields.featuredImage.fields.file.url + ') center 50% fixed no-repeat'"></div>
</div>
</mat-grid-tile>
</div>
</mat-grid-list>
You could use inline styles for this. Those are style properties given to an element through a HTML tag attribute.
You should provide a default or fallback image in your styles and override it with inline styles like this:
div {
display: inline-block;
margin: 0.5em;
height: 200px;
width: 200px;
background-color: teal;
background-repeat: no-repeat;
background-size: cover;
}
<div>Default background color</div>
<div style="background-image: url('https://i.stack.imgur.com/roCfw.jpg');">Dynamic background image</div>
Use a directive in combination with inline CSS, angular-style
<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" class="main"
*ngIf="blogPosts$ | async as blogPosts">
<div *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science &
Tech'">
<div class="tile">
<div class="title" [bgImage]="blogPost.fields.featuredImage.fields.file.url">
<p>{{ blogPost.fields.title }}</p>
</div>
</div>
</mat-grid-tile>
#Directive({
selector: '[bgImage]'
})
export class BgImageDirective {
#Input() bgImage?: string;
#HostBinding('style.background-image')
private get finalImageUrl() {
return this.sanitizer.bypassSecurityTrustStyle(
'url(' + (this.bgImage ?? '') + ') center 50% fixed no-repeat'
);
}
constructor(
private sanitizer: DomSanitizer
) {}
}
I am struggling with how I can place my CSS style code from my HTML into my CSS stylesheet. I am using 1 picture with different characters and the CSS im using will perfectly cut the image into different characters with the CSS behind the div class "spelers". Should I add an ID to my class or?
Over here my code
<div class="spelers_lijn1" id="spelers_lijn_1">
<div class="stang"></div>
<div class="spelers" style="left:162px;background-position:35px 0px"></div>
</div>
<div class="spelers_lijn2" id="spelers_lijn_2">
<div class="stang"></div>
<div class="spelers" style="left:92px;background-position:0 0"></div>
<div class="spelers" style="left:232px;background-position:-35px 0"></div>
</div>
<div class="spelers_lijn3" id="spelers_lijn_3">
<div class="stang"></div>
<div class="spelers" style="left:112px;background-position:-70px 0"></div>
<div class="spelers" style="left:212px;background-position:-105px 0"></div>
</div>
.spelers {
position: absolute;
width: 30px;
height: 69px;
top: 0;
background-image: url(../images/spelers.png);
}
Over here the image im using https://imgur.com/a/DkvoInI
The idea of this is to have a responsive header with text and an image element, which sit on a fixed background image.
I've tried to do this with bootstrap columns, which works on desktop to come out the way I want it. On smaller devices however, the bootstrap media queries do exactly what they are supposed to do and break the columns up to be displayed below each other.
I am out of ideas for this. I know I need to fix the image element somehow to stay consistently on the bottom end of the container, but since the entire thing is responsive I have no idea how to accomplish that.
Here is what I have so far, but this is not the solution. I appreciate any suggestions.
<section class="section swatch-black section-text-shadow section-inner-shadow">
<div class="background-media" style="background-image: url('http://some-url.com/home-intro.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment:fixed; background-position: 50% 60%;"> </div>
<div class="container">
<div class="row">
<div class="col-md-6 text-left element-normal-top element-normal-bottom">
<h1 class="bigger hairline bordered-normal element-tall-top"> Header Text<br>
<strong>More Text </strong> </h1>
<p class="lead"> Even more text </p>
learn more
contact us </div>
<div class="col-md-6 text-right">
<img src="assets/images/uploads/test.png" style="position:relative; right: 0px; bottom: 0px; top: 150px;">
</div>
</div>
</div>
</section>
you can set up your own column structure. Here's an example that I made for you real quick:
http://jsfiddle.net/97wswqvr/
this will need more work obviously, depending on the rest of your header text/buttons etc... but its a good place to start
html
<header>
<div class='content col col-1-2'>
<div>
text text text
</div>
<div>
text text text
</div>
<div>
text text text
</div>
</div>
<div class='col col-1-2 img'>
<img class='col' src='http://store.storeimages.cdn-apple.com/8459/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone/compare/iphone-compare-bbh-201411?wid=254&hei=210&fmt=png-alpha&qlt=95&.v=1416449205305'/>
</div>
</header>
css
html,body {
margin: 0;
}
header {
background-image: url(http://wowslider.com/sliders/demo-85/data1/images/southtyrol350698.jpg);
text-align: center;
}
.content {
color: white;
padding: 40px 0;
}
.col {
display: inline-block;
vertical-align: middle;
}
.col-1-2 {
width: 45%;
}
.img {
}
img {
width: 70%;
}
Hi i was trying to create a website with the help of bootstrap 3.3
However I am stuck up with an issue that the image I am using is not responsive ie after a certain period it breaks.
This is the HTML code snippet:-
<div class="img-responsive" id="intro"> <!-- This is the container to display image-->
<div class="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 ">
<div class="box" style="margin-top:62px;">
<h1>Welcome to my world</h1>
<p>Welcome to web development program</p>
<button type="button" class="btn btn-default" id="continue">Continue</button>
</div>
</div>
</div>
The below is my css code snippet:-
#intro{
background: url('images/prog.jpg') fixed;
background-size: cover;
height:650px;
/*position: fixed;*/
}
#continue{
margin-left: 218px;
margin-top: 27px;
color: blue;
}
Please help me with this.I am not sure why the class img-responsive is not working.
img-responsive class for img tag only not for div.
as this is background image, it will not resize but yes, you can use different size image on specific break point
Thanks
I'm trying to put a background image on my form (like behind the text and inputs, just like a background image of my web site), using the Bootstrap framework but the image appears at the bottom and I want it inside the "container".
My code is something like this:
<div class="container">
<div class="thumbnail">
<form....>
<fieldset>
.
.
.
</form>
<img src="cs.jpg" class="img-responsive">
</div>
<div>
Have you tried setting the background image of that container as the image? IE:
.container {
background-image: url("cs.jpg");
}
Or you can do it inline:
<div class="container" style="background-image: url('cs.jpg');">
...
</div>
or you could try like this..
<body>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
</div>
</div>
</body>
and in css like this:
.jumbotron {
position: relative;
background: #fff url("slide.jpg") center center;/*slide.jpg =>you image*/
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}