I'm trying to setup a full page background image using the following in the css file
html {
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Although it does appear nicely, it appears only below of anything appearing in the main body (e.g. footer)
Any help would be appreciated
Regards, loaannis
Perhaps you didn't set your div's right:
Here I have a sample code for you including a "main-content" div and a "footer" div inside the "body" tag:
HTML:
<body>
<div id="main-content">
<p>1234 testing 1234</p>
<p>main content goes here</p>
<p>4321 testing 4321</p>
</div>
<div id="footer">
<p>Contact information here</p>
</div>
</body>
and this is the CSS with an extra line determining the footer color (for better visibility):
body {
background: url("http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#main-content {color:yellow;}
#footer {position:absolute; bottom:0; color:white;}
Notice that, for better visibility I have replaced your local image url with an image I found on the internet. Of course any image url will show correctly. I have also replaced the "html" with "body" in the css. Since the "body" is what it is actually "shown" I don't see why you should style the "html". However, even if body is replaced with html in the css, it still works fine!
Demo here: http://jsfiddle.net/Ee74C/4/
Happy coding,
Thodoris
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 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);
}
So, I'm trying to get a background-image to work on any device, where it covers the body and stays in the same place no matter where you scroll. Setting background-attachment: fixed; works great for most devices, except for Android 2.X. Now, what I am trying is to have a separate div that fills up the screen with the background image.
I got this idea from This answer. Works perfectly! Except, on occasion, whenever the screen size changes or the content changes, the background becomes white all of a sudden. This happens sporadically and I cannot find a cause for it.
Here's my css for the background:
#background{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url('../Images/About/about_background#2x.png');
background-size: cover;
background-position: top center;
background-origin: padding-box;
background-attachment: fixed;
}
Here's the HTML:
<body ng-controller="MainCtrl">
<div id="background"></div>
<div id="wrapper" class="">
<div id="scroller" >
<div class="container" style="" ng-view ng-class="slide">
</div>
</div>
</div>
</body>
I have noticed that inspecting the element in developer tools and removing ".container" will remove the white background and the "real" background will show again.
Does anybody have an idea as to why this would happen? Or, if there is a better way to obtain a fixed position background image, please let me know! Thanks in advance!
on the body Can you try with this solution if you like:
background: url(img/aurora.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I'm using bootstrap jumbotron, and including a background image. Resizing the screen makes the image tile and repeat, whereas I want the image to be responsively resized.
<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
<div class="container for-about">
<h1>About</h1>
</div>
</div>
How would you go about making the image responsive? The site is HERE. Thanks for your ideas!
The simplest way is to set the background-size CSS property to cover:
.jumbotron {
background-image: url("../img/jumbotron_bg.jpg");
background-size: cover;
}
This is what I did.
First, just override the jumbotron class, and do the following:
.jumbotron{
background: url("bg.jpg") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
So, now you have a jumbotron with responsive background in place.
However, as Irvin Zhan already answered, the height of the background still not showing correctly.
One thing you can do is fill your div with some spaces such as this:
<div class="jumbotron">
<div class="container">
About
<br><br><br> <!--keep filling br until the height is to your liking-->
</div>
</div>
Or, more elegantly, you can set the height of the container. You might want to add another class so that you don't override Bootstrap container class.
<div class="jumbotron">
<div class="container push-spaces">
About
</div>
</div>
.push-spaces
{
height: 100px;
}
I found that this worked perfectly for me:
.jumbotron {
background-image: url(/img/Jumbotron.jpg);
background-size: cover;
height: 100%;}
You can resize your screen and it will always take up 100% of the window.
This is how I do :
<div class="jumbotron" style="background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
<h1>Hello</h1>
</div>
You could try this:
Simply place the code in a style tag in the head of the html file
<style>
.jumbotron {
background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
}
</style>
or put it in a separate css file as shown below
.jumbotron {
background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
}
use center center to center the image horizontally and vertically.
use cover to make the image fill out the jumbotron space and finally no-repeat so that the image is not repeated.
TLDR: Use background-size: 100% 100%;.
background-size: cover; may cut off some parts of the image producing poor results.
Using background-size: 100% 100%; you force the image to take up 100% of the parent element for both height and width.
See W3Schools for more information on this.
Here is a working, responsive jumbotron background image:
<div class="jumbotron" style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
<h1>Welcome</h1>
<p class="lead">Your message here</p>
<p>Learn more ยป</p>
</div>
Unfortunately, there is no way to make the div height respond to the background-size. Easiest solution that I have used is adding an img tag within your jumbotron that contains that background image.
The below code works for all the screens :
.jumbotron {
background: url('backgroundimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
The cover property will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
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>