I have an image: app/assets/images/oops.jpg
In 404.html I have:
<html>
<head>
<title>Oops! Where are we?</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
background: url('oops.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>
I confirmed that the image is indeed in production on Heroku, but the browser can not find the image.
Here is an image of my files.
What am I missing here?
If your image is app/assets/images/oops.jpg
then your path to the image needs to be:
body {
background: url('/app/assets/images/oops.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
background: url('../images/oops.jpg') no-repeat center center fixed;
Try image path as "/assets/oops.jpg" or "../images/oops.jpg" this one too in another case .
Assuming that you are using ruby on rails app from your path that you have mentioned.
hope this will work for you.
I was also facing this issue while deploying a rails app on heroku in my case a little css change solved the problem
body {
background: asset-url('oops.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
use this asset-url instead of url property. hopefully it will solve your problem
instead ...
use this
body {
background: url('../images/oops.jpg');
background-repeat: no-repeat;
background-size: 100% 100% ;
}
Related
I have tried everything and cannot figure out why I cannot get the background image to show up for this div.
**Here is the code:**
body {
margin: 0px;
padding: 0px;
}
#top {
background-image: url(../IMG/PINS.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<head>
<title>TEST BCKGRND IMAGE</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div id="top">
</div>
</body>
</html>
The file structure is set up like this: I have a main folder called TEST_SITE, inside of that folder I have a folder for my CSS and a folder for my images called IMG.
I cannot for the life of me figure out why the background image is not showing up.
If anyone can please give me a heads up as to what might be wrong, I would truly appreciate it.
Thanks.
setting the height of the #top div is important: if you set the width, and then the height to auto, then the background still won't show because there is nothing within the div to put a background to. However, if you force a height by setting one in the css, then the background will show.
The code you have given for your path is incorrect because the background-image expects only a path to an image (and nothing else), whereas what you have given is suited to the background.
See my fiddle
You need to set a height and width value from the #top and use the background-position:center center; background-repeat:no-repeat; like my answer: for example
#top{
width:500px;
height:500px;
background-image: url(YOUR IMAGE PATH);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or you can make it like this:
#top{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background:url(YOUR IMAGE PATH) no-repeat fixed center;
width:500px;height:500px;
}
It is because your div is empty. If you add content to it then you will see the background. You can also set a height or add padding with CSS.
<div id="top">
<p>A large amount of text here</p>
</div>
or
#top{
height:400px;
background-image: url(yourimagehere);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or
#top{
padding: 25px 0;
background-image: url(yourimagehere);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am working in Ionic, I've added a background image in CSS, but when I build the android application there is a white space in place of that background image, how can I solve this error?
CSS code is:
.abc{
background-image: url('/img/s.png') !important;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
Your image should be at a path similar to www/img/background.png.
Make sure that start of your image path has "../" this will point it to the correct image path in your resource folder once the app is built for a device.
To set background image you can try below css.
.scroll-content{
background: url("../img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
in some ionic version
.pane{
background: url("../img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
If you are using ionic2 then in src/app/app.scss
.scroll-content {
background: url("../../img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
or
ion-content{
background: url("../../img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
I'm upgrading my Ionic App version:
ionic: ionic-bower#1.2.4
ionic-platform-web-client": ^0.7.1
cordova: 6.1.1
And after the upgrade the background image is not centered, my CSS code is:
body {
background:url('../img/splash.png') rgb(227,227,213) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And my body html only is:
</head>
<body ng-app="starter">
<ion-spinner></ion-spinner>
</body>`
Is a possible bug of Ionic? What Am I doing wrong?
I had a problem with it too and found this link
So here is the solution for how to add background for all size of devices in hybrid application.So you have to add the following to CSS to your style.css. You have to add same css for your scroll content because above css will work only for the screen not for scroll-able screen .
.BackgroundImage{
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size:contain;
}
.scroll-content{
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size:contain;
}
I have a pretty standard MVC template I'm using for a project. On a view in my project, I am trying to display a different background image depending on my screen width. The problem is that if I wrap the CSS in media queries then push the content up to a development server, my background images don't load. I don't have this problem in localhost though. I'm using Bootstrap in my project, but this particular CSS is written in a separate file. Also, this project sits in another project on my server.
/Root Project
--My Project
CSS:
html {
background: url(/Images/img1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
#media (max-width: 768px) {
html {
background: url(/Images/img2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
.center-margin {
margin-top: 30%;
}
.header-text {
color: black;
}
}
The header in my HTML has the following metadata tags:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
After I took the media query off the first html block in my CSS, it started displaying again. The second block wrapped in the media query won't display. The other CSS inside the media query displays, so its just the background image that is giving me issues.
Your code is working. You should make sure that your image resources are uploaded to your server in the correct directory. Also, typically for loading URLs you're going to want to put them in quotes.
html {
background: url("http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
#media (max-width: 768px) {
htm
l {
background: url("http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
.center-margin {
margin-top: 30%;
}
.header-text {
color: black;
}
}
Here is a Codepen of this working with images hosted online.
So I have the following css code which sets the background image to all my webpages
html {
background: url(../index/images/white.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
My question is can I have a background image on one page lets say index.html and another background image for the rest of my pages?
You can do this is a variety of ways, an easy one is to give a class to a root element and style appropriately. FYI I'd use body instead of html for the background.
CSS
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body.home {
background: url(../index/images/white.jpg) no-repeat center center fixed;
}
body.product-list {
background: url(../index/images/another-image.jpg) no-repeat center center fixed;
}
index.htm
<body class="home">
...
</body>
productList.htm
<body class="product-list">
...
</body>
You could use a class instead of going directly for the html selector:
.blue
{
background: blue;
}
then call it like so:
<html class="blue">
Add internal style to index page, like below
<style>
body {
background: url(../index/images/white.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
And CSS file's body will apply to all other pages.
Add you class only to that index.html file for that site.
<html class="home-page">
html.home-page {
background: url(../index/images/white.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}