Can someone tell why this:
.s1{
background:url('../img/backgrounds/new/background1.jpg') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
}
Work on localhost and background stay in place like for fixed position, but when I upload it on server it's static ? :) There is no more code to show, it's just one DIV
ps. it's not cache I clean it, its not browser I user that same.
ANSWER:
I got IT ... backstretch plugin was turn on and on localhost was turn off :)
Try this:
/**
background:url('../img/backgrounds/new/background1.jpg');
background-size: cover;
min-height:100%;
background-attachment: fixed;
background-repeat: no-repeat;
**/
Your code works... so the most likely cause is that your CSS file has been cached.
You can do a hard refesh (SHIFT + Refresh, or CTRL + F5).
Or you can add a cache-bust to your URL, or a version number:
/assets/site.css?v2
Increasing the version number will ensure everyone gets the new CSS.
Related
I have a background image set. When I look on a mobile device the background image is different sizes on different pages even though they are all linked to the same stylesheet with this code
Site is 'treyscode.com' you can go to the different pages and see the size difference. Page is still not finished so don't give me too hard of a time :)
'''
body {
background: url(../image/blackhole.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
width:100%;
}
'''
Why would different pages show the background image as a different size?
Actually it depends upon your content of the webpage.As you have set the background-repeat property to no-repeat so it makes you think that it's of different size. In actual the image is constantly sticked and it's of same size on every page.
If you'll remove the above background-repeat property then you can see the difference which i'm talking about.
I am trying to set the background image with a local file however, my code does not appear to be working. Can anyone tell me how to correct this issue? Below is my code, there is also an img link that will show you my file directory.
body {
background: url('../public/images/backgroundImg.JPG');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: scroll;
}
code link
The filepath is wrong, according to your posted image it should also contain a pics folder:
background: url('../public/images/pics/backgroundImg.JPG');
I have a chrome extension that lets me add css to any website. I am trying to put a background using an image on my harddrive, but can't get it to work.
For this example I am using www.google.com
If it makes a difference, the chrome extension I am using is called Stylebot
This the CSS I added
body {
background:#F9F0C9 url("file:///C:/Users/username/OneDrive/Documents/PaperPAge/5-wrinkled-parchment-paper1final2.png") center center fixed;
background-repeat: repeat-x;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The #F9F0C9 color is added to the background, so something is working, but selected background image does not appear.
Stylebot is a Chrome extension and thus all scripts, including the CSS parser, are written in JavaScript. #C.Dhruv is correct, there is no Chrome method for arbitrarily reading files from a user's local disk without prompting them. If possible, I would recommend uploading the image to either your own public-facing webserver or some image hosting site and reference the URL accordingly in your code snippet above.
Please change background to background-image
then your code will be
body {
background-color:#F9F0C9;
background-image:url("file:///C:/Users/username/OneDrive/Documents/PaperPAge/5-wrinkled-parchment-paper1final2.png") center center fixed;
background-repeat: repeat-x;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm trying to get a background image to fill the screen on a container-fluid div and it is not working. I've done quite a bit of research, but here's the problem: the website I'm working on is on a platform on which I have absolutely no ability to edit the html. This is the website for my HOA (Homeowner's Association), and they use a god-awful platform - HOA Express. The only customization ability I have is a "Custom CSS" box on the website settings page. The website's url is.
I had a full-screen background image on the site previously, but this week they updated their whole system from something circa 2002 to I assume a version of bootstrap (with which I am not very well-versed), and in doing so they wiped out all existing custom css, so I have to go in and redo everything.
Any ideas on what I might try? Is this even possible?
You are missing background-size: cover from my example. However this will "zoom" the image, and I don't think that is what you want. I suppose you want the image to fill the viewport, and stay there. To achieve this you need to set your background to cover "100%" and be fixed.
So basically you add this.
.container-fluid {
background-size: 100% 100%;
background-attachment: fixed;
}
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
Add background-size and width to the image
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
My website has THE PERFECT FULL PAGE BACKGROUND IMAGE. I grabbed the code for it from css tricks.
If you visit my site you can see it in action: <site no longer available>
What I'd like to know is, is there a way I can have this image change to a different image once you scroll a certain length?
My aim is to have the same image but with a speech bubble coming out of the dogs mouth and I'm guessing 2 images will do this.
Is this possible to do in CSS only?
Here is the code I am currently using.
html {
background: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
As others already said, Nop, you can't only with CSS, but a little js code can do it for you.
Ex.
jQuery(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('html').addClass('scrolled');
}else{
jQuery('html').removeClass('scrolled');
}
});
And in your CSS file:
html {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}
html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}
So basically you are adding or removing a class to the HTML tag at some distance from the top with javascript (jQuery in this case)... and with CSS, changing that image.
Now on.. you can apply some transitions to the image, or play with the code to made it slideToggle for example instead changing the class.... and many many other options.
Good luck
EDIT:
Fiddle example: http://jsfiddle.net/pZrCM/