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.
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 trying to set background image for particular components.I want to set image to entire html page of example.component.html, but its not working for me
example.component.css
html {background: url(assets/imagenew.jpg) no-repeat center center fixed; -
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover; }
body { background-color: transparent;
overflow: hidden; }
I have been working on a solution to the problem with no luck. I have a set of background images, a full size set for desktop and a mobile optimised set of images.
Now when I run the following code on Chrome on the desktop and resize the browser to activate the #media then everything runs great and looks correct. But when I then go to test on safari on the IPhone I just get a blank spot where the background image should be.
<meta name="viewport" content="width=device-width, initial-scale=1">
section.box_park {
min-height: 500px;
background: url('/images/sample-park.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
section.box_building_management {
min-height: 500px;
background: url('/images/building-management.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media only screen and (max-width: 420px) {
section.box_building_management {
background: url('/images/mobile-building-management.jpg') no-repeat center center fixed;
}
section.box_park {
background: url('/images/mobile-sample-park.jpg') no-repeat center center fixed;
}
}
Any idea why this is happening?
* UPDATE *
If I comment out the #media it will display the background images but obviously not the mobile optimised ones.
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% ;
}
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;
}