Based on this page :
- http://css-tricks.com/perfect-full-page-background-image/
I have used CSS injector to make my home page :
- http://tailored.bike/
I believe I had this code working properly
.front h1.title { display: none; }
body {background: none;}
html {
background: url(/sites/default/files/u44/framed_home_2013_10_19.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then for some reasons I had to change the domain name and I can't have it work back.
Does any one have an idea ?
Regards
Julien
edits:
Does nok work neither with full http://... image url.
It works if I uncheck "Preprocess CSS"... I let it this way for now.
Just tested in Chrome and your background image reference is still mapped to your old domain. Your CSS should read:
html {
background:url(http://tailored.bike/sites/default/files/u44/framed_home_2013_10_19.jpg) no-repeat center center fixed;
/* Other CSS stuff */
}
Fix that reference and the image loads fine.
Related
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 have a not so unusuall problem but either my google skills suck or I don't know how to ask and find solutions to my problem.
I am using bootstrap3 to build my website which looks fine on IE 8 except for a banner part.
The outer .row div is 100% with a background image covering the full with. Inside the div, I have a .container div has centered content leaving some space on both ends.
In all browsers except IE8, this design works fine but on IE, the background image only goes as far as the .container leaving white space on both edges.
Here is my css
.heading
{
background: url(../images/inner-heading-bg.png) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-width: 50px;
min-width: 100%;
}
Please see attached image for IE
IE8 doesn't support background-size: cover; by itself, it needs a little push in the back.
You can use a polyfill like: https://github.com/louisremi/background-size-polyfill to get it working in IE8.
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;
I have a fairly complex webpage and am looking to have a image in the background that is seen through all out all the div layers. Please take a look at http://va.in-design.com for the code. No matter what I try, I am able to only get some of the menu to show. Some settings make it show when the menu on the page is accessed (hovered over). Can someone give me a pointer on the best way to do this. Also, is there anything available out there that would allow that image to be 100% at load and then fade down to 15%?
There is CSS opacity and CSS transitions, but for this I am going to use jquery.
Adjust your html{} selector to show the background like this
html {
height: 100%;
margin: 0;
width: 100%;
background-image: url(/images/logos/v-alexander-logo1-04-transpart-web.gif)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am not sure what you mean the menu doesn't show I saw the menu over the background image for sure. If you are still having this issue I would recommend using the z-index as one of your css rules for your menu ul#sdt_menu or wrapping that in a div id also and adjusting that parent div's z-index.
the jquery to do the opacity fade would be this http://jsfiddle.net/naeluh/XYB3u/
add this div to all the pages you want the background.
<div id="background"></div>
add this css rule to your style.css file and take away your html{}
#background{
height: 100%;
position:absolute;
top:0;
left:0;
width: 100%;
background-image: url(http://va.in-design.com/images/logos/v-alexander-logo1-04-transpart-web.gif);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:-1;
}
add this in the head of the pages you want it to fade out
<script type='text/javascript'>
$(window).load(function(){
$('#background').fadeOut(9000);
});
</script>
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/