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
Related
Explanation of what I want to get.
I displayed the problem in the attached picture.
How can I get this result?
Thanks all
This is a CSS issue
.myDiv {
background: url(...) no-repeat;
object-fit: cover;
}
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'm trying to set a background image in my section tag on the home page of my website. It works with the following CSS, but the problem is whenever I scroll down and scroll back up, or refresh the page after scrolling halfway down (where the section that I set the background image is out of view), the image disappears (leaving the background to be white). If part of the section is still in view when I refresh the page, only that part of the image shows the image and everything above it turns white, leaving an empty gap where the rest of the image is supposed to be.
The weird thing is if I try to select the image with my mouse or do Control-A to select everything on the page, the parts of the image that are selected appear where it's supposed to be, which means it's there but just not showing up for some reason.
Here's my code:
HTML:
<section class="homePage"></section>
CSS:
.homePage{
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
What's the cause of this problem and what's the remedy?
Specifying an absolute URL (starting with the site root /) for the background image solved the issue for me.
.homePage {
background: url(/images/background.jpg);
}
You just need to add background attachment.
background-attachment: fixed;
I have a custom style in my css for a background image I want to apply:
.specialbg {
background-image: url('http://i.imgur.com/XMuKF.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I want to apply this style to my body element in HAML, but I'm not sure how the arguments are setup. I'm thinking that the following should work:
%html
%head
%body
.specialbg
But it doesn't. I've read the haml styling reference manual, but can't see where I'm wrong -- I've just adopted haml, and I'd appreciate any help or pointers!
Stack Q's I've referenced:
scaml "illegal nesting" error
Background images do not render on Ruby on Rails application
To add the class to your body element, you would just append the class to the tag like this:
%html
%head
%body.specialbg
It could be a typo in your example, but the way your example is set up, you are putting your body tag within the head tag
If you put the .specialbg class on its own line, it will create a div inside of your body tag with class='specialbg'
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. :)