how to set background image url for local files? - html

I want to paste a relative image url to a div to set it as the background image. Unfortunately the div won't render the image. So this works fine and renders the image
<img src="../assets/images/HeroImg.jpg">
but this one doesn't
<div style="background-image: url(../assets/images/HeroImg.jpg)">
Content goes here
</div>
Things I also tried:
wrapping the url inside single quotes
assets/images/HeroImg.jpg maybe?
./assets/images/HeroImg.jpg starting from the src folder
images/HeroImg.jpg and ./images/HeroImg.jpg starting from the assets folder
What is the correct url to use for background images?
Update
I'm using VueJs so things might be different here? Steps to reproduce:
Create a new project using the Vue CLI
Create a images directory in src/assets
Create an image in src/assets/images and call it HeroImg
Update App.vue file with
.
<template>
<div id="app">
<div>
This works:
</div>
<div>
<img src="./assets/images/HeroImg.jpg">
</div>
<div>
This doesn't work:
</div>
<div style="background-image: url('./assets/images/HeroImg.jpg')">
Content without background image
</div>
</div>
</template>
You will see that the img tag renders the image but not the div with the background image.

Terry's answer did the trick but I needed an extra set of parentheses around the url tag content:
computed: {
heroImage() {
return {
backgroundImage: `url(${require('../assets/images/HeroImg.jpg')})`
};
}
}

When you're using relative paths, Webpack is unable to resolve them properly if they are found inside your inline style attributes. Webpack, can, however, resolve the image path properly if it is use as an <img> element source in the template directly. Therefore, the solution to use a resolved image path as a CSS attribute is to simply reference it as a computed property.
In your template, you can use v-bind:style="heroImage" to reference a computed property:
<template>
<div id="app">
<div v-bind:style="heroImage">
Content without background image
</div>
</div>
</template>
Then, in your VueJS component itself, you can do:
computed: {
heroImage() {
return {
backgroundImage: `url${require('../assets/images/HeroImg.jpg')}`
};
}
}

html
<div class="yourDivClass">
Content goes here
</div>
css
.yourDivClass {
background: url('../assets/images/HeroImg.jpg') no-repeat center center / cover
}

You should wrap them with quotes.
From MDN, we need to wrap the path or url of the image into a
background-image: url("../../media/examples/lizard.png");
<div style="background-image: url(../assets/images/HeroImg.jpg)">
Content goes here
</div>
Suggestion:
Better to avoid the inline styles. you can include the style in an external sheet.

I think you have not specified height and width property.
div {
width: 60px;
height: 60px;
border: 1px solid black;
}
<div style="background-image: url(https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2017/04/Blog_coding-game.jpg.webp)"></div>

Try in css file like this
background-image: url('~src/assets/home-page-img/header-bg.jpg');

Related

How do i call an image from a folder using css

I am trying to call an image from a folder using css.
I have tested the css with background color, so i know it is linked and working properly.
what I've tried:
I have tried to call an image from outside the image folder.
I have tried to change the image type to png.
And i have tried a different image.
html
<section id="hero">
<div class="hero container">
<h1>testing</h1>
</div>
</section>
css
#hero{
background-image: url(img/Computer_repair(1).jpg);
}
Your code works (see fiddle) so I'm assuming you just have the image path wrong.
So when you say...
#hero{
background-image: url(img/Computer_repair(1).jpg);
}
...that means where ever your css file is saved, there also needs to be a folder called img and inside that folder is where you need to put Computer_repair(1).jpg
Your code looks fine. I suspect there's a problem with the image path. Try this:
background-image: url('/img/Computer_repair(1).jpg');
The problem was it was not working with the (1).
I Needed to change from Computer_repair(1).jpg to Computer_repair_1.jpg
HTML
<section id="hero">
<div class="hero container">
<h1>testing</h1>
</div>
</section>
Css
#hero{
background-image: url(img/Computer_repair_1.jpg);
}

How to set custom CSS for data-src

I know that we can set css for a image via id or its class. My images in the site are coded as below
<img class="img-responsive" id="loader" src="{{asset('img/loader.gif')}}" data-src="{{asset('uploads/banner01.jpg')}}" >
Attributes of the images
loader.gif
Width:200px
Height:200px
banner01.jpg
Width:500px
Height:400px
Custom CSS added via loader id
#loader{
width: 200px;
height: 200px;
}
My problem is that when I add this custom CSS it works fine with 200px width and 200px of height but it also explicable to banner01.jpg too.
Means even banner width 500px and height 400px after loading image it shows as a 200px X 200px image.
What I want to know
Is there is a way to add custom css to data-src ?
There is a better solution to load images, videos and contents after page rendered called lazy load.
There is a very simple JQuery plugin to implement that with very few lines of codes.
http://jquery.eisbehr.de/lazy/
There are only 3 steps.
Add CDN or download and link the plugin.
2.Add "lazy" to class attribute of img tag.
EG:
<img class="lazy" data-src="images/1.jpg" />
3.Add this JQuery function.
<script>
$(function() {
$('.lazy').lazy();
});
</script>
To add a gif for loading just change your function to this.
// plugin build-in placeholder management
$(function() {
$('.lazy').lazy({
placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7..."
});
});
For a demo check this link.
http://jquery.eisbehr.de/lazy/example_basic-usage
You will try below custom css
img:not([data-src$="loader.gif"]) {
Width:500px
Height:400px
}
I think you should load these two images to two image tags. And put it in the same div.
And put this css id to div.
<div id="loader">
<img class="img-responsive" src="{{asset('img/loader.gif')}}">
<img class="img-responsive" data-src="{{asset('uploads/banner01.jpg')}}" style="width:500px;height:400px">
</div>

Img src VS CSS Background Image No Intrinsic Dimensions

I've got a markdown with HTML built inside and I need to change the following:
<img src="..." />
Into
<img class="image" /> // Could also be a div, doesn't matter
And give it a background-image CSS style instead (this is due to webpack bundling and the fact I have no imports and variables in .md files)
Problem is that the first option loads the image properly without having to specify height/width, and the 2nd approach shows nothing unless I specify height/width.
Fiddle demonstrating issue
Why is this, and is there a way to bypass this without specifying height/width for every such occurence?
The best you can do is calculate the proportion of the img and then use the value for padding and cover to fit that:
As an example if the image is 1:1 proportion:
.image {
background-image: url('http://i.imgur.com/3Zh2iqf.jpg');
background-repeat: no-repeat;
background-size:cover;
padding-top:100%;
}
<div>
<div class="image">
</div>
</div>

Can I use Less to set a CSS background image based on a class name?

I have a template technology that generates my DOM and less generating my CSS. In my template, I am iterating over a list of objects that include a name for an icon image.
What I would like to do is take that icon image name and use it as a CSS class. Then with less, set the background image path to something based on that class name:
.className {background: url(../some/path/constant/[#className].png);}
..saving from me needing to set the background style in the template itself.
Yes!! Setting CSS background is not dependent on LESS. If you can do it using CSS, then you can always do it by less.
To set different background image (LESS way)
#image-base-url: "http://your-images-url.com";
.className1 {
background-image: url("#{image-base-url}/image1.png");
}
.className2 {
background-image: url("#{image-base-url}/image2.png");
}
.className3 {
background-image: url("#{image-base-url}/image3.png");
}
In your HTML:
<div class="className1>
<span> This will have image1.png as background</span>
</div>
<div class="className2>
<span> This will have image2.png as background</span>
</div>
<div class="className3>
<span> This will have image3.png as background</span>
</div>

How to pull IMG SRC from one HTML tag into another?

I'm working on a school project and I'm wondering if this is possible:
In one div, I've defined an <img>, which will display.
In the second div, I want the img src to come from the first div.
Is it possible to do this? Preferably without anything besides css/html.
If you don't mind a little JS you can do it inline in your HTML. E.g.
<img id="img1" src="http://cdn.obsidianportal.com/assets/50953/serenity19dc.png" />
<img id="img2" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="this.src=document.getElementById('img1').src" />
Here the second image has intially just a placeholder image (1x1 gif) but on load it is replaced by SRC from the first image.
You need JavaScript to copy the src attribute, but you can have two images while defining the URL in one place by defining a background image in CSS:
.is-image {
background: url('http://www.google.com/images/srpr/logo11w.png') no-repeat;
width: 538px;
height: 190px;
}
<div class="is-image"></div>
<div class="is-image"></div>