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%;
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%;
}
The background image I have setup works fine in web browser, it stays static, but on mobile the background is constantly changing depending on the height of content?
When the content is short on mobile the background isnt zoomed in but basically shows the left Third of the photo. When the content is long paragraph it is a much more zoomed portion of the first third of the photo.
I am currently using the current css
background-image: url("/images/midgame.jpg");
background-size: cover;
background-attachment: fixed;
overflow-x: hidden;
If you do not want the background image to zoom in or out, remove the background-size: cover
Also try background-position: center top
Set explicit dimensions so that the background image appears when there is little or no content. Set height:100%. Might have to set width as well.
EDIT:
Remove background-attachment:fixed
Add min-height:500px or whatever number you wish.
The best example of what I need would be the picture behind the search bar on http://shutterstock.com. Try to unzoom (ctrl and - on Chrome) ; the rest of the website will size down; the image itself will remain the same size, it will only be cropped as its height decreases.
Basically, I need the background image to be responsive and full width on an otherwise unresponsive and 960px theme.
It's giving me a bad headache so far; I can't figure out how to do it.
Any ideas?
I think you're looking for background-size. FYI, this doesn't work in IE8 and below I believe.
.your-class {
background:url('images/yourimage.jpg');
background-size:cover;
}
body {
background-image: url(blah.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
'cover' will make the background image rescale based on the container's size
'fix' will make the background image positton stay fixed when u scroll down
I want to use this kind of image for my background.
http://www.wallpaperpin.com/xres/1920x1440-download-free-awesome-psd-designs-website-backgrounds.jpg
How can I make it look "centered" (I mean the light rays to be displayed as if they are in the middle of the site) using css on any screen resolution it will be browsed? I mean to be displayed in the same way both on 1440x1050 or 1920x1080 or on any mobile device.
Do I have to find other pictures with other resolutions to be displayed depending on the visitor's resolution? Will that require php-script?
body{
background: url("imageurl.jpg") center center;
}
If you want it to scale to the browser resolution, you can also use
background-size: cover;
background : url('images/background.jpg') top center no-repeat
background-size : 100%;
making it top center rather than center center makes it from the top... (Duh) and background-size: 100% makes the image the size of the browser window.
This is my tumblr blog:
thestorywithnoending.tumblr.com
the code for the blog is a theme I got here:
http://themes.pouretrebelle.com/lycoris/?download
(just scroll down a bit, the whole code is there)
I want the background image to just be ONE image...
I know I'm not being descriptive enough, so to fruther explain: I want it to be like this:
http://chloescheffe.com/
you see how on that website the background image is.... everything basically. And when you change the size of the webpage, the background image changes accordingly?
how can I do that on my tumblr blog?
THANKS :)
with css. set the height and width of your bg image to 100%. sorry, i'd give you the code but this keyboard doesn't have all the characters of a larger one.
use the background-size css property w3schools.com/cssref/css3_pr_background-size.asp
You can do this two ways using background-size. One will stretch the image and one will fill the width properly, but cut off the bottom.
For stretch, add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: 100% 100%;
}
For width-fill (this looks better with your current blog), add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: cover;
}