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.
Related
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");
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 have a thymeleaf template where I don't have CSS files imported and wanted to declare style attribute for the body element with background-image: url{/image.jpg} property with relative image URL. I wanted to load the URL without including the application context name(/myapp/) it. It is similar to the problem over here, except it din't work for me.
CSS:
<style>
body {
background: url(../img/Background.jpg)
no-repeat center center fixed;
background-size: cover;
}
</style>
But the above CSS doesn't work and it accessed the image at
http://localhost/img/Background.jpg.
So, I had to give the value as url(/myapp/img/Background.jpg) for the image to load properly.
I have the mvc:resources configuration properly set in spring-context.xml for /img/ request to load properly and it works in other places.
spring-context.xml
<mvc:resources mapping="img/**" location="/WEB-INF/img/" />
So how to load the background url image css value dynamically using thymeleaf's relative url?
So, here's how to set dynamic relative paths in background image url property in the css using thymeleaf's inline text value,
<style th:inline="text">
body{
background: url{[[#{/img/Background.jpg}]]}
no-repeat center center fixed;
}
</style>
which loads the image using relative path and we don't have to specific the 'myapp' context name in the url.
In my case that helped:
change brackets from curly to round
<style th:inline="text">
body{
background: url([[#{/img/Background.jpg}]])
no-repeat center center fixed;
}
</style>
An alternative is:
<body th:style="'background: url(/img/la-paz-city.jpg) no-repeat center center fixed;'">
...
</body>
that is all 😉
<body th:style="'background-image:url(' + #{/images/background.jpg} + '); background-repeat: no-repeat, repeat; background-size: cover;'">
</body>
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 want to load an image via css that stretches to the entire screen. The css:
body {
background: url(images/reelgoodguide2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: auto;
margin: 0px;
padding: 0px;
}
Which works perfectly in Chrome and Firefox and IE9.
There is a conditional in the html to include an additional css file if the browser is IE8 or IE7. This css contains:
body{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale')";
}
But instead of alphaimageloader stretching the image to the entire screen, the image remains centered and it and does not resize.
Note: when I open developer tools I can see that the css file is there. When I disable the filter property, nothing happens. Any tips to what Im doing wrong?
Thanks in advance.
OKAY... After a grueling bit of fiddling, this is what i figured out:
First:
The filter path to an image is relative to the html document, not the css file. FRUSTRATING
Second:
I got this to work by applying the filter to html instead of body.
I had read that the IE workaround were not to be applied to html but what I noticed was that there was (after I had cleared up the image path problem) a stretched bacground image but it was behind everything else.
I think it's not possible with CSS alone. Search for supersized. You will find some JavaScript libs.
One more useful answer to solve IE8 background issue is:
Download backgroundsize.min.htc and put it inside your project.
Now simply add these lines in your css:
.class_name{
//your other properties
background-size: cover;
-ms-behavior: url(backgroundsize.min.htc);
}
NOTE: use the url according to your project setup.
Enjoy this simple solution. :)