I couldnt figure out what went wrong. When i try ionic serve everthings loads properly. But when I try running it on android device none of the image loads and instead shows an error Failed to load resource: net::ERR_FILE_NOT_FOUND None of the image loads properly.
my scss file
.bg-image{
background-image: url('../../assets/imgs/bgimage.png');
background-repeat: no-repeat;
background-size: 200%;
background-attachment: fixed;
position: absolute;
my html file
<div class="bg-image">
.
.
</div>
unable to figure out please help.
Try changing the path keep images in main www/assets/img folder and then set
background-image: url('assets/img/bgimage.png');
Hello,
.bg-image{
background-image: url('../assets/imgs/bgimage.png');
background-repeat: no-repeat;
background-size: 200%;
background-attachment: fixed;
position: absolute;
}
When addressing images from your .ts files, use ../assets relative
path because we have to get out of the build directory first. When
addressing the image from your .html files, use assets relative path,
because in the final apk file all HTML are merged into one single file
called index.html which is placed next to the assets directory and
there is no need to go up one level before reaching assets.
Add your images to src/assets/imgs directory
Set image path in HTML like
<img src="assets/imgs/bgimage.png">
Set image path in SCSS like
background-image: url(../assets/imgs/bgimage.png);
It will work browser, emulator and build
hope that help you :)
Try this .
.bg-image{
background-image: url('/assets/imgs/bgimage.png');
background-repeat: no-repeat;
background-size: 200%;
background-attachment: fixed;
position: absolute;
The following solution worked for me.
Add your images in src/assets/imgs directory
Set following in your scss file
background-image: url("build/assets/imgs/bgimage.png");
Related
i am having trouble with changing background image,
html:
<ion-content padding class="arkaplan">
scss:
.arkaplan {
background-image: url("../../../www/img/arkaplan.jpg") no-repeat fixed center;
background-size: cover;
}
with this nothing changes.
i check some similar topics and some of them solved the issue with this:
background: url("../../../www/img/arkaplan.jpg") no-repeat fixed center;
but that way, i am getting an error in chrome like:
GET http://localhost:8100/www/img/arkaplan.jpg 404 (Not Found)
and black background. but if i put a web url to image it works. so basically app cant find my file but my directory is correct.
thanks for your support..
What is wrong with my code? I am using a PHP file for header and then I am including it where is needed.
This is the CSS I have:
header {
margin-top:0;
height: 200px;
background-image: url("slike/dekorativni.jpg");
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
When I set the background to some color it is showing colored background but image won't show.
Is it OK to put !DOCTYPE HTML in a PHP file inside an echo?
Try to change to Relative URLs. It may happen that your included file is not loading the css or the image path after including is not working. If you use Relative URL to the image path it must work. Please check also if your css is being load in the included file, check if fonts and other formats are working.
I am new to web development and I want to display an image for my background.Only problem is that my image will not show, may you please help me. Below is my code
<style type="text/css">
.bgimg {
background-repeat: no-repeat;
background-size: cover;
background-image: url("worldtravlerissue1.jpg");
min-height: 90%;
}
</style>
1)Be sure the div has a concrete width and height, if you're using % be sure the image div is inside another with a height and width declaration on css
2)Be sure you've declared the right class
3)Be sure the img url is right and you're reaching the right path
.img{
width:400px;
height:300px;
background-image: url(https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/RGRIEDX4IU.jpg);
background-size:cover;
}
<div class="img">
</div>
You're image might not be showing because either you have the wrong name for it, wrong extension as in assuming its a .jpg rather than .png or .jpeg or its not in the same directory as your HTML file. Make sure they are in the same folder or directory a.k.a Desktop.
If you have your HTML file on your desktop and the picture is in a different folder, you'd have to do
background-image: url("NAMEOFFOLDER/worldtravlerissue1.jpg");
Hope that helped.
I feel retarted for even having to post something like this but for being a vet in css I have no idea why this time I can't get an image to show in the background of a div. Here is what I have
#leadarea {
background-image:(images/submarines-for-sale-at-seamagine.jpg);
background-repeat: no-repeat;
background-position:center;
height:360px;
width:1160px;
}
<div id="leadarea"></div>
I have triple checked my path to the image and its correct. In the same directory of the file I have an folder called "images" and the file to that image. If I type in the full url to that image in a browser I can see the image. Why is my div not showing that image?
The proper syntax is:
background-image:url('images/submarines-for-sale-at-seamagine.jpg');
Also notice that the path is relative to the .css file placement.
Put the url in your background-image
background-image: url("your-image-path.jpg");
Try this to optimize your background definition in one line:
#leadarea {
background: transparent url("http://1.bp.blogspot.com/-5PauJ-PHxns/UVjwME0X9YI/AAAAAAAAA4s/lsd9ZRsfCnE/s1600/coelho+escolha.jpg") no-repeat center;
// background: color url("your-image-path.jpg") repeat position;
height: 400px;
width: 400px;
}
Check the example here: http://jsfiddle.net/R5cJp/2/
I'm creating a theme for a drupal site, it is very basic so far. The folder structure of the theme is like so:
theme-folder
-->css
-->style.css
-->images
-->first_page_slideshow.png
--drupal files--
The css for the region in question:
.content-header {
background-image: url ('../images/first_page_slideshow.png');
background-repeat: no-repeat;
background-position: left top;
width: 1024px;
height: 380px;
}
Yet I the image fails to load as a background. Google developer tools reveals that it is an "Invalid Property Value" on the background-image: css tag.
Any help would be appreciated.
This
background-image: url ('../images/first_page_slideshow.png');
becomes
background-image: url('../images/first_page_slideshow.png');
Just a space between url and the parenthesis.
A simple proof: http://jsfiddle.net/suLNk/