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);
}
Related
I have got a website that looks like this:
<div id="top" class="header-container2">...</div>
<div class="main-container">...</div>
The first div is the header section and the second the main content area with products and so on. Now I want a full background image and I tried like this:
html {
background: url(someimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Did not work, no image shown. On the body element it does not work either. Only when I assign the exact same CSS to the main-container div, it works, but the image is not shown as background on the div with id top of course. So, how could I assign the background image without having to think about the structure of the site? Possible at all?
I double checked the path of the image, so thats not the problem.
Set html height to 100vh or 100%
html {
background: url(someimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
}
These are the default CSS which we set on top of, while writing custom styles like body,html to 100%
And also its good to provide minimal HTML and CSS of your working code.
first, make sure your two divs don't have a background property, otherwise you can simply englobe them in a containing div and assign the background to it.
You can also use the body, I think. Do you use any CSS resets?
body {
background: url(https://images.pexels.com/photos/1227511/pexels-photo-1227511.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div {background-color:rgba(255,255,255,0.7);margin-bottom:10px;padding:10px;}
<div id="top" class="header-container2">header-container2</div>
<div class="main-container">main-container</div>
To make the page cover the window height, you might try:
html,
body {
height: 100%;
}
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;
Is there any reason for when using html5 boilerplate to set up a website using
body {
background-image: url(../images/beach.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
in the css won't load an image for me, but using just
body {
background: url(../images/beach.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
works?
If you're using background-image, you can only use this property to set the background image. Values that belong to other properties cannot be set. In this case, you're trying to set values for properties which do not belong to the background-image property.
This is possible if you're using the background property, which you can use to set any background-related property.
I guess you must use double quotation.
background-image: url("paper.gif");
background-image is a directive to set only the file of background image.
Other properties can be set with these directives:
background-color
background-image
background-repeat
background-attachment
background-position
background only is a shorthand that permits to use one or more directive above.
The background shorthand property sets all the background properties in one declaration.
More infos on w3school site
Try this:
body {
background-image:url(../images/beach.png) center center fixed;
background-repeat:no-repeat;
// rest of your code
}
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/