I have a small problem on my site about background-size:cover
I have been testing it in Firefox all along, but when i load the page in Google Chrome, i get 1px white all to the left. When i use background-position:-1px the white edge left goes away (but then i get it to the right). Is there any way to fix this, and still keep the cover?
I applied this to my body: background:url("images/baggrund.jpg") no-repeat center center fixed; background-size: cover
I can not link to the site at the moment, but hope i described it clear enough.
Thanks in advance
Edit: added a screenshot, top comes from firefox, bottom from Chrome.
Try this:
background: background:url("images/baggrund.jpg") no-repeat 49% center fixed;
background-size: cover;
In chrome, when you use "background-size: cover", if the xpos of background-image is no less than 50%, you will meet that problem.
So, the xpos is set to 49% (or 49.9% to reduce the error) instead of "center" will fix that problem.
My English is not good, i hope you know what i mean.
That did not work for me, because i used background cover, but i just added a chrome specific line to set my background-size to 101%, that seems to fix it (for the eye).
Thanks for the input.
101% might work fine but you could also try this fine-grained solution:
background-size: calc(100% + 1px);
Alternative :
Another solution would be to reduce or increase the background image's width by 1px in an image editing program if it wouldn't matter.
Otherwise, this should do it (as #estrar pointed out) : How do I fix 1px margin on Google Chrome?
Changed background-size: cover; to background-size: 100%;. Worked for me!
You could apply the background property to the body tag, which would cause it to cover the whole page.
You could also try applying the following style to the body and html tags:
html,body{
padding:0;
margin:0;
}
So I tried all of the solutions out there and could not get that last px to work. Tried all sorts of big and small image dimensions too.
My problem was that I was using svg. I bit the bullet and switched to png.
/* background: url("/static/images/orgchart-background.svg") no-repeat; */
background: url("/static/images/orgchart-background.png") no-repeat;
background-size: 100% 100%;
Related
I have a Django site, and when I run it on my local machine everything is fine, but when I make it to pythonanywhere.com one little problem appears: somewhy and somehow my background image doesn't want to fill the whole page even though it does on my local host (using the same browser, so the problem is not here). Basically I don't mind changing the aspect ratio, I just want each pixel of the background to be fully on the screen, would it be either 600x400 or 200x2000.
body {
background: url("images/classes.jpg") no-repeat center center fixed;
background-size: 100% 100%;
}
It seems to me like {background-size: 100% 100%} just... doesn't work?
I tried to switch percents to 100vw 100vh, but the output was literally the same.
Page itself: http://seltsamermann.pythonanywhere.com/classes/
Image itself: https://i.ibb.co/0G86wL2/classes.jpg
I wonder what might be the problem.
(in case that might help somehow)
https://github.com/Seltsamermann/Specs-SL-PvP/blob/master/main/templates/main/classes.html
https://github.com/Seltsamermann/Specs-SL-PvP/blob/master/main/static/main/style_classes.css
The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. Use this propriety for the image in your css, or the container that stores that image.
object-fit: cover;
For more : https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Try this:
body {
background: url("") no-repeat center center fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Well, basically I just outplayed myself; the real problem was the version control, I just missed several things. Code in the main post works totally fine.
I've been fiddling with my background image in CSS for a couple hours now and have tried searching through articles to find a solution but still have nothing. I'm trying to make my background image fit the screen no matter what the browser size.
At first I was using this CSS code which seemed to be working:
body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
But then when I re-sized the browser this happened: http://prntscr.com/j1d4kv
I then went and found another solution that said I should put the background image in the html tag, which i tried:
html {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
}
This fixed the issue of the background image not fitting to the bottom when the browser size changed, but then I had this issue when I was full screened: http://prntscr.com/j1d742 It left a gap on the right side!
Most likely your body doesn't reach the full height of the browser window, if it doesn't have much content. Add this to correct that:
html, body {
height: 100%;
}
You want to add,
background-attachment: fixed;
Here's an example: https://embed.plnkr.co/3Y7O1TQa8ssPQKVq0tCW/
Kind of weird title, but couldn't think of better way to word it.
Basically I'm working on a website, and I want to use an asset I made in photoshop for a navbar that looks like a leather suitcase/belt background. Issue is, if I stretch it too far, it won't fit the screen. Basically if I use the CSS background-size: cover; background-repeat: no-repeat; property, it looks something like this
It fits nicely on the 100% width of the element, but as you can see, the image is clipped because it's not 100px as I want it to be.
If I used background-size: contain; background-repeat: repeat-x; properties my image would obviously fit nicely when it comes to height, but since it's not a seamless texture it doesn't clip properly horizontally. As seen on the image below:
Which looks pretty weird as you can see. Last but not least I tried using the 50% 50% trick - background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;, which kind of worked but i still have a problem with it not fitting vertically (the edges are being cut off), as you can see here:
So I'm asking if there's a way to fit the image properly with CSS that I'm missing. Alternatively the second image i posted with repeat-x, however if there would be a way to check (probably with javascript/jquery) that once the image doesn't fit (ala second image), it needs to be flipped horizontally with scaleX so the edges fit, or should I simply downscale the image in photoshop? Thanks for your advice.
Have you tried :
background-size: (100% 100%);
Try using viewport to give the element width in accordance with the screen width (100vw = 100% browser width).
.nav-belt {
width: 100vw;
height: 100%;
}
This is a simple question about CSS, but I am not sure I know how to ask it correctly. Basically, I have an image that I wanted repeated both x and y. But even though this image is repeated, is it possible to style it as if the image was positioned absolutely?
Take this image here: https://samraines.herokuapp.com/assets/paper-d5baa328bec5b7c9fe4cf98bba88452e.png, and look at it here: https://samraines.herokuapp.com/shows . This is what I was wanting to use this style on, but was unsure if I could accomplish and "absolute" style due to the image's size.
Clarifying once more, I want the image to repeat, but appear as if it was fixed.
Thanks for your help.
Try this css:
.element {
background-image: url(...);
background-position: 0 0;
background-repeat: repeat;
background-size: auto;
background-attachment: fixed; // if you do not want to scroll image with site
}
like here http://codepen.io/Chovanec/pen/dkFDp
On this page I have 2 background images:
(1) A blue sunburst that is set as a background image of <html>
html {
background: url("BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg") no-repeat fixed center center / 100% auto transparent;
outline: 0 none !important;
}
(2) An image showing a crowd of arms in the air that appears at the bottom of every page. I use the sticky footer solution to make this stick to the bottom of each page
Everything works fine at normal browser widths, but once the browser width is below about 500px a white space starts appearing at the top:
and at the bottom
of every page. Previously I used
background-size: cover;
for the sunburst image, but this caused the website to crash the browser on iOS 6 (seriously), so I need to find a way to fix this without using this rule.
The white space is due to the browser positioning the image center center as defined in the CSS.
html {
background: url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size: 100%;
outline: 0!important;
}
I thought the solution would be just setting background-size: 100% 100% as the current setting of just background-size: 100%; is 100% width and auto height. But it's bugged in Chrome - background-size:100% 100%; doesn't work properly in Chrome. There is a workaround answer on that question that might help.
However, if the background-size: 100%; is dropped for width < 500px, perhaps in one of your #media rules, then the background fills the page as expected. The rule is still required when the window is greater than the width of the image to stretch the image.
If you're not opposed to a JS solution, you could try using Backstretch.
Set the background-size to something larger than 100%. I think 200-250% will cover that area.
background-size:220%;
One side effect this has is the fact that it causes slight lag due to the size.
Here, Have this solution...
In this file...
http://festivals.ie/static/C5z61WeZeCfyTRbmu6lNPsxXxwhibmxExq6ADwtSPjh.css
On line no 793,
this code is there in the last part of that line...
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;}
Add this property : background-position: 0px 0px;
Making the code:
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;
background-position: 0px 0px;}
And fyi, as andyb pointed out the white space is the image leaving its top position to be centered, thereby making it look like a white space starting to appear..
Hope you get the point.
Regards