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');
Related
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;
}
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.
I want to have different background images for different subpages (i.e. "Menu" has a image #1, "Contact us" has image #2 etc.)
I have the following css code:
html {
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;
}
But this sets one image to every subpage. Now I can make each subpage have a different div in the html (e.g. div id="menubg"; div id="contactusbg") and add the above CSS (slightly changed) for each div, but then I create a ton of unnecessary CSS items.
So, is there a better way to do it?
Should I put the background image into the HTML directly and add one css to that image? Is that doable with the preservation of all CSS properties like "cover"? (Ideally I would like to have a code for the image in in each HTML and one CSS for all subpages, can I do that?)
Is using JavaScript (or other) a good/better soultion?
Is making multiple CSS styles the only solution?
Thanks!
The way I normally do this is to give the body the background, not the html. You will want to give your body an id name of the page it's on.
First of all, you want to blanket all of your body elements as well as putting all of your extra background information into their own lines:
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
}
then, if you want img1 on menu and img2 on contact us, give your body and ID of one of the two:
<body id="menu">
then in your CSS you just write in your background-image property by itself:
body#menu {
background-image: url(images/bg1.jpg);
}
and the same with your contact us page:
<body id="contact-us">
-
body#contact-us {
background-image: url(images/bg2.jpg) no-repeat center center fixed;
}
So your CSS file ends up looking like this:
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
}
body#menu {
background-image: url(images/bg1.jpg);
}
body#contact-us {
background-image: url(images/bg2.jpg);
}
I am new to the Ionic framework and I am trying to start the app with a full screen background image like this:
I did manage to remove the statusbar it was shown in the tutorial. But how do I add a full screen image? When I added this to the style.css it didn't react:
html, body{
background-image: black;
}
In your css, try:
.scroll-content {
background: url(image) [add image position info here];
[add any more properties here]
}
This will set the background for the full content area.
in
ion-view class="pane"
all the stuff is rendered ... i did not try it out but i think you can manage this with
.pane {
background: url(image) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
Make sure the 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. Using the pane method only seemed to cause problems this was the best solution for me when the image was appearing when served but not on my android device.
.scroll-content{
background: url("../media/images/background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
Very similar to answer from Helmut, which worked using 'ionic serve' but gave me a white background when I pushed to Android (4.2.2 on a Nexus 7 in my case).
The pane class selector is correct if you wish to make the background fullscreen, however android just seemed to make the background white if I set the "background" value at all. Using "background-image" put things right.
I found the following worked on Android, and in Chrome (while web testing).
.pane {
background-image: url(image);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
In Ioinc-5:
Create a in class home-page.scss.
.class-name {
--background: url("/assets/icon/background.jpg") 0 0/100% 100% no-repeat
}
Open home-page.html and add class in ion-content.
<ion-content class="class-name">
Since the folder structures have changed recently in Ionic 2 beta...
Your image should be at a path similar to www/img/backgrounds/lake.png, and the accompanying CSS should read:
.myClassName {
background: url(../../img/backgrounds/lake.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
Note: you need to jump up 2 directories, ../../
Ionic 4 Change Background color of Ion Content
Explained here Source Link
ion-content{
--background: url(./assets/images/bg1.jpg);
--background-repeat: no-repeat;
--background-size: cover;
}
Try below code to change your image url with full background with different device.
ion-content {
--background: none;
background-image: url('https://cdn.wallpapersafari.com/19/81/zOUft6.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
below code works for me
--background: none;
background-image: url('../../../assets/imgs/splash.png') ;
background-position: center top;
background-repeat: no-repeat;
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/