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>
Related
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 have a random picture of a moose lying around so I wanted to use it as my ruby on rails website's background. I fumble online for a bit and here is what I got.
html {
background-image: url(images/moose.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The above does not work, my background is still white. What am I doing wrong?
The picture of a moose is located in app/assets/images/moose.jpg
I've tried using html body { } as oppose to html and background as oppose to background-image
<html>
<body style="background-image: url(output.png);">
Hello this is a text line.</body>
</html>
I assume your image to be in same directory of your html page. Otherwise give the relative path to image like C:/images/output.png
You can't use html, you have to use body. It should be:
body {
background:url('images/moose.jpg') no-repeat center center fixed;
}
Open chrome inspector and look at what background-image styles are loading.
url function requires a string, you need to use single quotes to pass in the string file you are trying to load.
background-image:url('images/moose.jpg') no-repeat center center fixed;
Here is what the def of URL says on w3schools. http://www.w3schools.com/cssref/pr_background-image.asp
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'd like to edit some background properties on my Wordpress site.
Using Chrome's Inspect Element I can see that currently I have:
body.custom-background {
background-color: #f6f6f6;
background-image: url('http://patchwood.ca/wp-content/uploads/2013/06/bktopright.png');
background-repeat: repeat;
background-position: top left;
background-attachment: fixed;
I would like to edit background-repeat to no-repeat and background-position to right.
Sounds simple but when I look in the Editor in Wordpress the selector does not exist. It turns out that this styling appears to be within the html on line 53 of the home page.
If it was a handcoded website I would just update the stylesheet but since it's a database driven Wordpress site it's more difficult to know where to edit.
I wonder if there is a means of adding styling to the body element background that overrides any other properties? So basically, if I was to add to the very bottom of the stylesheet the following code to override anything else.
body.custom-background {
background-repeat: no-repeat;
background-position: top right;
}
I did try just adding that but with no success. Any ideas?
its showing up in the header - by the looks of it - its probably a custom background image set in the wordpress backend.
a rather round about way of fixing this can be to add
<style>
body.custom-background {
background-repeat: no-repeat !important;
background-position: top right !important;
}
</style>
to your header or footer
It seems like it's hard-coded, as you suggest. It's located within the <head> tag, which means it's probably part of header.php. Instead of editing style.css, why not look in header.php and change it there (or better yet, delete the reference in <head> and move .custom-background's style information to style.css)?
Edit According to the Codex, custom backgrounds are enabled using the following line in functions.php:
add_theme_support( 'custom-background' );
Removing this line (and then setting your desired background properties in style.css) should do the trick.
i have to manage background in inspect element css this is success css
code:
<style>
body.custom-background {
background-attachment: fixed;
background-color: #F6F6F6;
background-image: url("http://patchwood.ca/wp-content/uploads/2013/06/bktopright.png");
background-position: right center;
background-repeat: repeat-y;
}
</style>