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%;
Related
I'm trying to add a background image to a grid item, but regardless of which browser I use, the image always turns out blurry. The original dimensions of the photo are 6000 x 4000. Here is the code that I used for the grid:
.content {
grid-area: content;
padding-top: 15%;
background-image: url("https://drive.google.com/thumbnail?id=14rw1Bbhf5MWV3BlBx3G0tVzmoUcK03I6");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This is the original image:
And this is what the image looks like from the webpage (ignore the text):
I've also tried converting the image to .svg or .eps, but that just makes the picture turn out even worse. Does anyone know a solution to this?
Your image is not big enough to be shown on full screen and that's why its blurry. I have copied the original image link you have pasted in your question and updated the .content class. Use this and set the height: 100vh:
.content {
grid-area: content;
padding-top: 15%;
background-image: url("https://i.stack.imgur.com/xkpSw.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
}
Try a different image host. The Problem seems to bee with Google Drive & not with your code. The image sent by Google Drive is already compressed.
You seem to be picking up the thumbnail version of the image which is of course much smaller and so when you ask it to cover the page it gets blurry.
It seems as though the original large version with the dimensions you mention can be picked up like this:
.content {
grid-area: content;
padding-top: 15%;
background-image: url("https://drive.google.com/uc?id=14rw1Bbhf5MWV3BlBx3G0tVzmoUcK03I6");
background-repeat: no-repeat;
background-size: cover;
}
.inner {
/* just to give some content for this demo */
height: 100vh;
display: inliine-block;
}
<div class="content">
<div class="inner"></div>
</div>
But you probably don't want such a large file for normal browser use - perhaps get an intermediate size and store it yourself?
Note, the image is in focus in the foreground, but even on this very large size it looks a bit burry at the top of the parachute - that is just what the image is.
I had a problem similar to yours, I solved it by changing the background size
instead of
background-size: cover;
I used
background-size: 100% 400px;
You can play around with that to get your desired outcome, worked for me I hope it works for you aswell!
I'm aware of the css properties background-size: cover; and background-size: contain; however despite of description of its usage I can't seem get it to work the way I need.
At the moment I'm adjusting coverage of the background image manually which is very impractical as you can imagine. How can I adjust coverage or repetition based on how many divs are on a page ?
On the mobile viewport its particularly desired. When I scroll down on the phone I want to see all divs covered to the footer. If I add another div (think a comment) background image would be extended.
body {
background-image: url("bg.jpg");
background-repeat: repeat;
background-size: contain;
height: 1000px; /* <-- impractical way of adjusting coverage */
}
I'm considering a javascript solution but it wouldn't be elegant but rather cumbersome. Is there "built-in" solution to this ?
All I needed to do is to replace lines:
background-size: contain;
height: 1000px;
with:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
works like a charm.
I'm trying to change a background-image that get cut when the screen resize to let always fit the width of the screen.
I tried adding a new class or changing some parameter but it doesn't work on the background-image.
.fixed {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-size:100%;
}
This is the image I need to change, as you can see if you resize the browser it get cut:
http://followmedelivery.com/
This is an example of what I want to get, but they are doing it with img and not with the background-image:
http://followmedelivery.com/wp/
There is a lot of code to review if you don't place a fiddle, but maybe this is the problem.
transform: translate3d(0px, 19.0805px, 0px);
I have check that this style is being applied to your background image, but not by CSS but JS. So you would have to go to the JS file and delete that and check if that make the picture not cut anymore. Give it a try and let me know if that worked out :)
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%
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