First off, I'd like to say that I have found this thread: "background-size: cover" does not cover mobile screen.
I have read through the responses in that thread and have tried them, to no avail.
Here is what the browser version of the site looks like:
http://i.imgur.com/dmNWq.jpg
And here is what the mobile version looks like:
http://i.imgur.com/KGJ8247.png
(please bear with me, as I cannot post images due to having low rep.)
Relevant CSS:
.splash {
z-index: 1;
list-style: none;
margin: 0px;
padding: 0px;
background: url('../assets/splash.png') no-repeat center center fixed;
background-color: #159957;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
min-height: 100%;
}
Basically the problem is that the image won't correctly size on mobile, even with the correct overrides in place. I do not know what path to take, and any help would be appreciated!
Instead of: background: url('../assets/splash.png') no-repeat center center fixed; you should use: background: url("../assets/splash.png") no-repeat fixed center center / cover;
Why?Because according to W3 if you want to include the background-size value in the shorthand syntax, you need to:
Explicitly include background-position values even if these are the same as the defaults (see above).
Write background-position values before background-size values.
Put a slash in between these two pairs of values because without it we cannot distinguish which values are for which
Related
I'm creating a form on my page with bootstrap css.
I use an image as background which covers the entire background.
bootstrap seems to add a semi-tranparency to the top of my page, which disappears when scrolling the page: http://www.landoflove.be/medewerkers.php and I can't seem to find out why it's doing that. It does the same thing on the main page landoflove.be .Why is this happening and how can I disable it?
Your html code is invalid. There's no doctype and you have unclosed div somewhere. Fix this first, then add:
html, body {padding:0; margin:0}
Check this CSS in your landoflove.css file
body, html {
height: 100%;
background: url(../img/bgoff-min.png) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: baloo paaji, sans-serif;
}
The problem is here
background: url(../img/bgoff-min.png) no-repeat center fixed;
Your image is having the size of 1227 X 1159 pixels. and you have added no-repeat center fixed
if you remove that you will have the background to be stretched something like this
Also, you need to modify the HTML
Seems that you are using only one
<div class="row"></div>
and all your form elements are inside this which is not a right approach.So suggesting you to have one form-group in one row
the mark-up was indeed invalid for some tags because is was a work in progress.
I seem to have found what my particular problem was:
body, html {
height: 100%;
background: url(../img/bgoff-min.png) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: baloo paaji, sans-serif;
}
The height: 100% caused the problem. Now the transparent layer is indeed gone, but i still have no clue why it added such tranparency in the first place.
I'm trying to get my background image to stretch across the entire page, but so far i have this:
This is the picture i want stretched across the browser window:
My external CSS contains the code below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg")}
Can anyone tell me how I can edit the CSS file to fix my problem?
You can use:
background-size: cover;
However please bear in mind which browsers this supports. For example, this won't work in IE8 and below.
Another option would also include:
body{
background-image:url("mybackground.jpg")
background-size:contain;
background-repeat:no-repeat;
}
Use background-size: cover. Note its browser support.
MDN documentation.
Background size will do the trick:
body {
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;
}
Check this out for more info:
http://css-tricks.com/perfect-full-page-background-image/
You need to make this an <img> tag, with a low z-index, with position: fixed and then for the <img> tag, use height: 100%; width: auto or the opposite.
This method is cross-compatible for all browsers.
Have you tried using
background-size: 10px 10px
Change 10 to the width and height of the body
You can also do
background-size: 100%
I'm just starting on a website and I already encounter a small problem where I can't find a specific solution to.
I wanted to make my website background fit any screen size in width, height does not matter.
This is the link to my image:
../IMAGES/background.jpg
EDIT
I have no idea what's wrong, but for some reason the body doesn't even want to get the background image. It just displays a plain white background.
body
{background-image:url(../IMAGES/background.jpg);}
you can do this with this plugin http://dev.andreaseberhard.de/jquery/superbgimage/
or
background-image:url(../IMAGES/background.jpg);
background-repeat:no-repeat;
background-size:cover;
with no need the prefixes of browsers. it's all ready suporterd in both of browers
Try this ,
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;
For more information , follow this Perfect Full Page Background Image !!
You can try with
.appBackground {
position: relative;
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
background-size:100% 100vh;
}
works for me :)
Try this, I hope it will help:
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
body{
background-image: url(".../img/background.jpg");
background-size: 100vw 100vh;
background-repeat: no-repeat;
}
Try this:
background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
.. I found the above solutions didn't work for me (on current versions of firefox and safari at least).
In my case I'm actually trying to do it with an img tag, not background-image, though it should also work for background-image if you use z-height:
<img src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >
This scales the image to be 'fullscreen' (probably breaking the aspect ratio) which was what I wanted to do but had a hard-time finding.
It may also work for background-image though I gave up on trying that kind of solution after cover/contain didn't work for me.
I found contain behaviour didn't seem to match the documentation I could find anywhere - I understood the documentation to say contain should make the largest dimension get contained within the screen (maintained aspect). I found contain always made my image tiny (original image was large).
Contain was with some hacks closer to what I wanted than cover, which seems to be that the aspect is maintained but image is scaled to make the smallest-dimension match the screen - i.e. always make the image as big as it can until one of the dimensions would go offscreen...
I tried a bunch of different things, starting over included, but found height was essentially always ignored and would overflow. (I've been trying to scale a non-widescreen image to be fullscreen on both, broken-aspect is ok for me). Basically, the above is what worked for me, hope it helps someone.
This worked for me:
body {
background-image:url(../IMAGES/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Try this,
.appBg {
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}
This one works for me
Background image fix to screens with browser compatibility css
.full-screen {
height: 100%;
width: 100%;
background-image: url(../images/banner.jpg);
background-size: cover;
background-position: center;
//for browser compatibility
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
Although there are answers to this your questions but because I was once a victim of this problem and after few search online i was unable to solve it but my fellow hub mate helped me and i feel i should share.
Examples explained below.
Folders: web-projects/project1/imgs-journey.png
background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;
My major points is the dots there if you noticed my journey.png is located inside an imgs folder of another folder so you're to add the dot according to the numbers folders where your image is stored. In my case my journey.png image is saved in two folders that's why two dot is used, so i think this may be the problem of background images not showing sometimes in our codes. Thanks.
width: 100%;
background-image: url("images/bluedraw.jpg");
background-size: cover;
You can do it like what I did with my website:
background-repeat: no-repeat;
background-size: cover;
background: url("../image/b21.jpg") no-repeat center center fixed;
background-size: 100% 100%;
height: 100%;
position: absolute;
width: 100%;
I am just trying to set my background but this image will not work. It is between 15 to 20MB in size so I tried to turn it into 5MB. Still no luck. I made a really small image, 25KB size, and that worked but just repeated. My localhost will not show big images either. Is there some limit? What do I need to do to get a full image page?
body {
background-image:url(background.jpg);
}
Do this to avoid repeating the image:
body
{
background-image:url(background.jpg);
background-repeat:no-repeat;
}
You can also experiment with background-size: cover like this:
body
{
background-image: url("http://www.google.com/doodle4google/images/carousel-winner2012.jpg");
background-repeat: no-repeat;
background-position: center center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
Here's a demo at JS Bin with a beautiful Doodle 4 Google as the background image to test the behavior:
http://jsbin.com/ivexah/2
you need to assign a width and height to body.
for example:
html, body {
width: 100%;
height: 100%;
}
You can use the shorthand background css property:
background: url(background.jpg) no-repeat;
Also your body might not have a height of 100% because there's no content on your page. Either give your html and body a height of 100% or add more content to your page.
To make a background image cover its entire container use background-size:
background-size: cover;
IE8 and lower don't support this. For those browsers you need a javascript fallback. There's an excellent article on css-tricks.com that shows different techniques.
You shouldn't have any "size" limitation on your background image. More than likely, you're file is so large that you are not waiting long enough for it to load OR you have not set a width and height. Without the dimensions, the element tahat you are trying to load the background image will essentially have a size of 0px x 0px. See the following jsfiddle example:
http://jsfiddle.net/GymxW/1/
The HTML:
<div class="container"></div>
The CSS:
.container {
width: 400px;
height: 100px;
background-image: url(http://dummyimage.com/400x100/4d494d/686a82.gif&text=background+image);
background-repeat: none;
background-position: 0 0;
}
IMPORTANT: If you are wanting to have an image that is "stretched" to the full size of the viewport, a simple solution is to use a plugin, such as Backstretch.
How does ones scale a background image with CSS? The image is attached with CSS, and I would like to scale it to fit a certain width
You may try the following code:
.aboutpic {
width: 150px; /* replace 150px with something you need */
float: left;
background-image: url(../images/aboutpic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 139px; /* replace 139 px with something you need */
}
Then in the html just put:
<div class="aboutpic"></div>
It works. I tested it.
With the background-size property (which has limited support).
Javascript is a good way to start, "jquery.backstretch.js" is a very good jquery lib to scaling the background img.
Or, if your target client is using modern browser which means it can support CSS3,
use this:
body{
background:url(background.jpg);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
http://www.w3schools.com/cssref/css3_pr_background-size.asp