I’m building my own child theme, based on the BuddyPress default theme. I need to have a background image that’s stretched 100% width/height. It works fine in Chrome and Firefox, but in the latest version of IE, the image just sits in the center, at its original size. No stretching takes place. Here is the CSS I’m using, which is just an augmentation of the parent theme (BP default theme):
body {
background-color: #000000;
background-image: url(images/DSC09005cc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #555;
font-size: 12px;
font-family: Arial, Tahoma, Verdana, sans-serif;
line-height: 170%;
max-width: 1250px;
margin: 0 auto;
width: 95%;
}
Thank you in advance.
Dima
IE9+ supports the CSS3 background-size:cover feature but IE8 and lower does not. If you're trying to fix this for IE 8 and lower I might suggest something like:
HTML:
<body>
<img src="images/DSC09005cc.jpg" class="fit-background">
...
CSS:
img.fit-background {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) {
img.fit-background {
left: 50%;
margin-left: -512px;
}
}
...
You could place the image in an IE conditional statement if you want to hide the image from browsers other than IE 6, 7 and 8:
<body>
<!--[if lt IE 9]>
<img src="images/DSC09005cc.jpg" class="fit-background">
<![endif]-->
...
Here's the original link if you want to read more about it and a couple of other options: http://css-tricks.com/perfect-full-page-background-image/
Related
So i am making a basic website.
Everything works fine when i open it on the desktop, but when i open it on my iphone, the background image of the body, does not "cover" the container.
What am i doing wrong here ? (i added the background-attachment: scroll on mobile devices after reading solutions on stackoverflow but did not work).
Here is an image of what is happening :
This is how it looks on desktop :
This is how it looks on mobile.
Here is my css :
#font-face {
font-family: rubikCustom;
src: url(Rubik-Regular.ttf);
}
html, body {
height: 100%;
width: 100%;
min-height: 100%;
}
.navbar {
background-color: #FFF;
}
.navbar-nav > li{
margin-left: 15px;
margin-right: 15px;
}
#home {
background: url(home_back_blur.png) no-repeat center center fixed;
display: table;
height: 100%;
min-height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* background-attachment:scroll */
#media only screen and (max-width: 480px) {
#home {
background-attachment:scroll;
}
}
#full-height-cont {
height: 100%;
width: 100%;
}
.landing-text {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
font-family: rubikCustom;
}
background-size: cover means that the background will always grow to "cover" the entire div.
on desktop, your div is landscape orientation (the width is longer than the height). on mobile, it happens to be portrait orientation (the width is shorter than the height). you can verify this by adding something like border: 1px solid red to #home.
there are two possible solutions: at mobile sizes change the element's height, or change the background-size property
I'm not a coder but have some basic knowledge and have been editing a template. The site is almost there - on desktop it looks fine but on mobile the cover image doesn't scale down.
I've tried changing the size from 100%, auto and cover, played with vw and vh etc, but still can't get anything to work.
Here's the CSS:
.intro {
display: table;
height: auto;
width: auto; /* 100% originally */ .
padding: 0;
text-align: center;
color: #333;
background: url(../img/intro-bg.jpg) no-repeat center top;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: auto;
-o-background-size: auto;
}
If anyone can help that would be great! the site is adammillsmusic.com
Thanks!
For Responsive Images do the following in .intro class
intro {
max-width: 100%;
height: auto;
display:block;
padding: 0;
text-align: center;
color: #333;
background: url(../img/intro-bg.jpg) no-repeat center top;
background-color: #e5e5e5;
background-size: contain;
-webkit-background-size: contain
}
Key changes
max-width: 100%;
height: auto;
display:block;
Hope this helps
You are prefixing properties different values :
-webkit-background-size: cover; : On webkit (Chrome & co), cover the background
background-size: auto; On other browsers, do not cover
This is probably why you see a covered background on your desktop and having unexpected results on a mobile browser.
body {
display: table;
height: auto;
width: auto; /* 100% originally */ .
padding: 0;
text-align: center;
color: #333;
background: url(//placecage.com/200/200) no-repeat center top;
background-color: #e5e5e5;
background-size: cover;
}
Set your max-width to 100% like this:
max-width: 100%;
Thanks for your help - this did solve the problem. Though now after seeing the result, I think maybe it would be wiser to call a smaller size image through the use of '#media' for the mobile site. The only problem is in my code editor when I try to do this it doesn't seem to recognise the '#media' tag and treats it like /* */
Any thoughts?! Thanks
#media screen and (max-width: 600px) {
.intro {background-color: #e5e5e5;
background: url(../img/Bg-mountain-small.png) no-repeat center top;
}
I am making a simple landing page and am trying to get the following image to be the background fullscreen: image
My CSS currently looks like this:
body {
background-image: url('/images/bg.jpeg');
width: 100%;
height: 100%;
position: fixed;
}
A majority of the image is getting cut off, what's the best way to remedy this?
Thanks !
Did you tried this :
body {
margin:0;
padding:0;
background: url('/images/bg.jpeg') no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
}
Heres a cool idea for a landing page. The background, being fixed is a popular cool way for landing pages. Please, to see this properly, click "Full Page" on the top right after clicking run code snippet.
#import url(https://fonts.googleapis.com/css?family=Lato:300);
div:nth-child(1){
background-image: url(https://images.unsplash.com/photo-1431538510849-b719825bf08b?q=80&fm=jpg&s=6fd7a983e3b43e66d2b6062856b9df66);
height: 750px;
width: 100%;
background-size: cover;
background-attachment: fixed;
}
div:nth-child(2){
height:400px;
width: 100%;
background-color: black;
z-index: 1;
}
h1{
text-align: center;
color: white;
background-attachment: fixed;
font-family: 'Lato', sans-serif;
padding-top: 300px;
z-index: 0;
text-shadow: 0 0 2px black;
font-size: 50px;
}
<div>
<h1> Michael Barreiro </h1>
</div>
<div></div>
Is min-height more appropriate?
Or for that matter, is it even appropriate for me to be setting all of my fullscreen backgrounds to both html and body? Can this be set to html alone?
html, body {
height: 100%;
background-image: url(blah.jpg);
background-size: cover;
background-position: center center;
}
everything is drawn on body, html is the main document, if you can give styles but is not highly recommended because body and html in question are the same.
min-height is used whenever a screen this size that does not want.
*{
margin: 0;
padding: 0;
}
body {
background-image: url(blah.jpg);
background-attachment: fixed;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
}
For some reason my header is being pushed down in firefox. It works fine in safari and chrome. I tried making the header position absolute but it sill is pushed down, when it should float up to the left corner of its parent- it doesn't. So this made me think the body was being pushed down, not the header.
so I started to investigate my background-image position on my body tag, but I have tried all kinds of combinations of positioning the image with no luck, and also
.home-body {
position: relative;
top: 0; left: 0;
}
I tried :contain instead of :cover- didn't work.
Then I though it had to do with height: auto, but no.
I have been experimenting with the homepage, although it is happening on all the pages.
here is the site:
http://lindseypod.com/v10/
my body tag:
body {
font-family: 'Roboto', sans-serif;
font-size: 15px;
line-height: 1.5;
font-weight: 100;
padding: 0;
margin: 0;
}
I have a body.home-page with a background-image with a css cover property:
.home-page {
background: url(images/home_2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
thenI have a header tag with elements inside of it:
header {
width: 100%;
background-color: rgba(255,255,255,0.8);
}
.header-content is within header:
.header-content,
.footer-content,
.content,
.bars-content {
width: 96%;
height: auto;
margin: 0 auto;
color: rgba(255,255,255,1);
max-width: 960px;
}
Add this style:
#home-mobile{
overflow:auto;
}
The large margin-top on .home-content > h2 is the source of the problem.
One sensible way to fix it is to add overflow: hidden to .home-content.
This is probably happening in Firefox due to a bug (?) with the handling of collapsing margins.