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%;
}
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 have the following website:
www.thewhozoo.com
When viewed from a screen with a width of more than 1240px, it displays the images side by side. With a screen below 1240px (e.g. mobile phone), it displays the images beneath each other. This is achieved using:
#media only screen and (max-width: 1240px) {
This all works fine.
My problem however is with the background image:
.top-container {
float: left;
width: 100%;
background: linear-gradient( rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1) ),url('../images/background1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
When the browser is wide enough (e.g. 930px here), it displays:
But with a narrower browser (e.g. 480px here) or a mobile device, it displays:
As you can see, in the image, the background work "WORK" gets chopped off in the second screen.
Question
Is it possible in css, to set a minimum width, so that the word "WORK" will always be visible, no matter the size of the browser?
This will give smaller browsers the effect as if they are viewing the page from further away (zoomed out).
Thank you.
The background-size: cover setting makes sure the whole element is always filled by the background images. In your case, the mobile version displays the complete height of the image and centers it horizontally, this way cutting something off at the left and right. If you would display it smaller (which would be necessary to see the whole word "work"), the height would shrink too, and the image wouldn't fill the window anymore.
You can try background-size: contain instead, which will always display the whole image, but will leave empty space on either top and bottom or left and right, depending on the orientation. But combined with a background color, this might be something you can live with.
Try background-size: 100% 100%, or background-size: 100%
Hope this helps!
What you can do is make two copies of the background image, when the browser is resized to the minimum width you can use javascript(jquery) to swap the background image from large to small version.
Or you can style the background like:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
I'm trying to set the background image using CSS but the original image is stretched.
How do I keep the original image size and set the background for the entire page at the same time?
body {
margin: 0;
background-image: url(background.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
The original image is: Original Image
And the result is: Resultent Image
The difference is the background in my web is larger than the original.
Any help would be appreciated !!!
All you have to do is to remove background-size: cover,
then all should be fine.
You have a lot of options regarding the background image and size.
For your needs you can check this W3c and try the different options you can apply.
Remember that since you apply CSS to your Body, all your pages will "follow" those rules. But some of your pages might have different height from the others.
The result also, depends on the screen resolution of the client.
You have to deside what is your desired result in all screen resolutions.
Try to remove background-size:cover; & set width of image to your requirement.
background-size:cover;stretches the image to full background.
or
Please change your image extension from .png to .jpeg or .jpg because .png always stretches your image and after that the css property u have defined earlier will work properly.
What you can do is just remove, background-size:cover;
Now let's see what does that mean,
background-size
Because background-size CSS property specifies the size of the
background images. The size of the image can be fully constrained or
only partially in order to preserve its intrinsic ratio.
cover
A keyword that is the inverse of contain(contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container). cover scales the image as large
as possible and maintains image aspect ratio (image doesn't get
squished). The image "covers" the entire width or height of the
container. When the image and container have different dimensions,
the image is clipped either left/right or top/bottom.
To get much identification just try JSFiddle
For the more reference on background-size:
remove background-size: cover;
Thanks.
I found the problem.
the source image is open with a zoom of 35% therefore when I set the backgroud it stretch to 100%.
body {
margin: 0;
background-image: url(background.png);
background-size: 60% 60%;
background-position: center center;
}
Try like this:
.your-class {
background-image: url(background.png);
/* Required Height */
height: 800px;
/* Center and scale the image nicely */
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
I have a fixed, full screen background. I have another image a few hundred pixels from the top that I want the background to appear to emanate from. Looks good here: http://imgur.com/Rlki1Bk.jpg but when the browser is resized the centre of the background image moves vertically but the foreground image remains fixed so they are no longer aligned. Any help would be greatly appreciated.
EDIT: Some more info. The foreground image is position:relative, and here is the CSS for the background image:
.background {
background-attachment: fixed;
background-image: url('/background.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
Hard to tell what's going on without some code, but...
background{
background-image: url("my-image.jpg");
background-position: center top;
background-size: 100% auto;
}
This will ensure that the distance from the top of the window to the other image never changes because the height of the image remains the same, and the position of the image is always flushed to the top. The problem that you'll encounter is that depending on the width of the device your background may stretch.
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;
}