I have a couple of images in my home page. I am using polymer iron-image as follow.
<iron-image style="width:100%; height:150px;" background-color:="" lightgray;"="" preload="" fade="" sizing="cover" src="images/img6.jpg" alt="Jaxworks" id="img6" class="x-scope iron-image-0">
**<div id="sizedImgDiv"** role="img" class="style-scope iron-image" aria-label="Jaxworks" style="background-image: url("images/img6.jpg"); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;"></div>
**<img id="img" class="style-scope iron-image" alt="Jaxworks" src="images/img6.jpg" hidden="">**
**<div id="placeholder" class="faded-out style-scope iron-image" style="background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;"></div>**
</iron-image>
I have about 10 of this images that are generated dynamically. The thing is each of the iron-image generated img has thesame id of img(id=img)(<img id="img" class="style-scope iron-image" alt="Jaxworks" src="images/img6.jpg" hidden="">).
`<div id="sizedImgDiv"** role="img" class="style-scope iron-image" aria-label="Jaxworks" style="background-image: url("images/img6.jpg"); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;"></div>`
<div id="placeholder" class="faded-out style-scope iron-image" style="background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;"></div>
I don't want the repeated IDS. I wonder if there is anything I can do about it.
Unfortunately, you cannot modify those IDs because they're used internally by <iron-image>. Many Polymer elements use IDs in their templates, so you'll eventually run into another instance of this.
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'm new. I've created a <div> inside a <section> and in this <div> I've added two background images using Gridlex. For some reasons, both photo go out of the container. I'd like to do something so both pictures don't go out of the container and take all the space of their Gridlex block.
Anyone, would know what I can do to fix this?
Here the photo:
enter image description here
Here the CSS I've wrote for both images:
.bg-about1 {
background-image: url('../images/about1.jpg') ;
background-size: cover;
background-repeat: no-repeat;
min-height: 500px;
}
.bg-about2 {
background-image: url('../images/about2.jpg') ;
background-size: cover;
background-repeat: no-repeat;
min-height: 500px;
}
<section class="light-bg section-about">
<div class="grid">
<div class="col-5_sm12-middle">
<h2 class="padded-7p center uppercase p-white">Title.</h2>
</div>
<div class="col-7_sm12-middle bg-about1">
<!-- <img class="img100" src="./images/about1.jpg" alt="Art design"> -->
</div>
<div class="col-5_sm12-middle bg-about2">
<!-- <img class="img100" src="./images/about2.jpg" alt="photo"> -->
</div>
<div class="col-7_sm12-middle">
<p class="padded-2 p-white"> my text.</p>
</div>
</div>
</section>
maybe try instead of
background-size: cover;
writing:
background-size: contain;
I have a simple code for a simple webpage, but it does not work: for some reason, the background is not displayed. I checked everything in different browsers on different computers. Where do you think there might be a mistake?
.section--map {
padding: 40px 0;
background: #e6e6e6 url("../images/map-bg.jpg") center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
<section class="section section--map">
<div class="container">
<div class="map">
<div class="map__title">
<div><i class="fas fa-map-marker-alt"></i></div>
<h2>Open Map</h2>
</div>
</div>
</div>
</section>
Did you check if path to your image is correct or it might be that your image type is .jpeg?
First of all, my native language is not English I hope that question and description are clear. I'm sorry if they're not.
Problem:
I'm using MDB framework, when I use the grid system the width of the last column is more greater than body. I tried to put widht: 100%; in the content and in every column (Class: Nx).
How do I fix this?
Html:
<div class="Mycolumns">
<div class="row">
<div class="col-8 N1" style="background-image: url(Resources/img/1.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N2" style="background-image: url(Resources/img/Sin%20t%C3%ADtulo-1.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N3" style="background-image: url(Resources/img/3.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N4" style="background-image: url(Resources/img/4.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N5" style="background-image: url(Resources/img/5.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
</div>
</div>
Css:
.N1, .N2{
height: 500px;
}
.N3, .N4, N5{
height: 300px;
}
I just encountered the same problem. What was doing it was one of my nested elements was set to width: 100vw - The view width seems to be the entire browser window including the scrollbar, so you effectively get '100% + scrollbar width' as your width, which gave me a 15px or so blowout. Changing the element's width to 100% fixed it.
Hi been working on this https://codepen.io/junedc/pen/yqXVaR to be responsive but to no avail. If I remove the height or change to percentage the image was lost.
<div class="gallery-height">
<div class="img" style="height:125px; "></div>
<div class="img" style="height:400px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office1.jpg');"></div>
<div class="img" style="height:130px;"></div>
<div class="img" style="height:300px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office2.jpg');"></div>
<div class="img" style="height:300px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office3.jpg');"></div>
If you really have to use it as a background image in the css, here's a trick I like to use in my projects:
url('http...') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;