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.
Related
I have a background image for my hero section. On some screen, the background image fits perfectly. However, on some other screens such as my iPhone, it's really way too zoomed in.
I tried solutions on Stack Overflow, such as background-size:contain or background-size:100%, but I end up with like a background that it is repeated 3-4 times. Here is my code for the background:
.bg-hero {
background-image: url('/img/background.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
UPDATE the initial answer raised the question of background-attachment: fixed which can cause problems in some combinations of settings. However, in this case testing with different aspect ratios images and leaving the fixed in I was unable to recreate the problem, the background-size: cover worked in both orientations. I leave the info below here for now in case it helps point to something that is causing the problem.
Original:
The problem may be in these settings:
.bg-hero {
background-image: url('/img/background.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
background-attachment: fixed is not supported in IOS. Depending on what version it can lead to e.g. overstretched image (though this question talks of zooming in rather than stretching). See https://caniuse.com/?search=background-attachment but the background-size: cover should have got round that for you.
Partial support refers to supporting local but not fixed
The dimensions of the image you are using for the background are not appropriate for mobile screens. The image you are using has landscape orientation. There are two things you can do :
Use different image having portrait orientation. And add media query in your CSS code.
This approach might not be suitable but you can give it a try. Instead of using image as background, use a relevant color for background (like some shade of brown in this case), and add image as a separate element in your HTML. You can again manage the size of image using media queries. And make sure you position image element as fixed.
Try min-height and check one
.bg-hero {
background-image: url('/img/background.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height:100vh;
}
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%;
}
I was looking at path.com today and liked their implementation of a dynamically sized cover photo. If you check it out you will see that it sizes nicely no matter your screen size.
I looked a little more into it and noticed the background image is attached to the body tag. I also noticed the body appears to get its size from the form element inside it, meaning the body itself it actually shorter than the total page.
Does anyone know how they accomplish this?
Also, the body height is set to 100% of the viewport.
I think you're looking for this part:
body.home {
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
I have a giant background image that I need 100% 100% scale. But my problem is if the webpage is say 150% height that of the browser (so browser is say 1000x1000, and my website is 1000x1500) when you scroll down to see the rest of the website the background repeats and doesn't get scaled down.
My css is
html,body { width: 100%; height 100%; }
body { background: url(blah) no-repeat; background-size: 100% 100%; }
Any idea of how I can fix that?
Here is a great resource on that topic.
http://css-tricks.com/perfect-full-page-background-image/
Hope it helps.
Like the CSS-Tricks article explained, you could change the CSS to:
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;
}
This will make sure your background image covers the whole page, but is only supported in CSS3. Like above, you need to include specific code for each major browser.
Alternatively, try just using:
height: 100%;
or
width: 100%
depending on the image size in relation to your page, but this should let the image resize to the right height/width of your page, while nicely maintaining aspect ratio.
Try applying the background image to the html instead.
Just set 100% on the width if its smaller then the height otherweise set the height 100%. You could probably fix that with javascript.