I have an image and am asked to copy the example given to me. currently, I am placing the background image and have noticed the example they have given me has given or taken, 100px from the top, and 300px from the bottom taken away (I could only guess the correct vocabulary to be cropped). I have attempted to use :
body {
background-image: url("stuffNthings.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
but have found that using this block the image is centered as far to the top right corner as possible and missing more than 300px from the bottom. the right side appears correct.
It would be good to know what this example you're given is but background-position property might be good in this case.
It will align the image to the right horizontally (I assume that's what you want since you say the right side of the image looks correct) and push it vertically up 100px (and will hopefully leave 300px at the bottom, it depends on the size of an image, but unless the page will be seen on a single size screen and not be responsive, I wouldn't worry about that).
body {
background-position: right -100px;
}
Check out MDN Docs for more info
Related
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'm trying to show the full background image as a landing page, then the content appears when the user scrolls down, however the bottom of the background image is usually cut off (depending on browser resolution).
I'm trying:
background-attachment: fixed;
background-size: cover;
Here is a codepen that demonstrates the issues:
https://codepen.io/suez/full/wulBv/
You can see that the bottom of the first image with Iron Man is cut off. Here is the full image (https://i.imgur.com/PbV1Grl.jpg).
Is there a way to show the full height of an image? Even if you need to scroll down more to see it?
use css:
background-size: 100% 100%;
You can add background-position: bottom
https://codepen.io/anon/pen/XMMVYo
It won't show the full height in most cases, but it will show the bottom of the image.
Or you use background-size: contain and (in this particular situation) combine it with a white background color
EDIT: White won't work, I didn't look close enough. Here's approximately what I mean, but it's not really satisfying, since there isn't just one color at the border of the image:
https://codepen.io/anon/pen/zZZpMX
You can use background-size with 100% height and width.
Remove
background-size:cover;
Replace with:
background-size:100% 100%;
i am working on a project in which I have a background image all over the page and over that on the left half of it I have a div in which there is lots of content along with a slider.
The image is of a girl.
background image is in body tag and we cannot move it to another tag.
now the problem is that the background image is cut in half from the left due to that slider content. now we cannot see the girl's face, only her body
I have to move that image towards right so that we could see her face also
i tried to crop the free space from image but that didn't help and we cannot move the slider content.
Image size: 5MB
Resolution: 2710*4072
tried to do margin-right
padding-right
background-position:right
but i can't move that image an inch to right
background-color: #ffffff;
background-image: url('/2014/12/Profile-Background-image.jpg');
background-repeat: no-repeat;
background-position: center right;
background-attachment: fixed;
line-height: 1;
Sample code: http://jsfiddle.net/gmunish/dby4e86j/
Image is not visible so you can add your own image and check
You can specify how far from the right you want the background to be if that is useful.
for example if you wanted the image to be 50px from the right you could use:
background-position: center right 50px;
you could also use a negative value to move it further to the right like so:
background-position: center right -50px;
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;
}
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