I am trying to do a simple landing page, and I have an header, content div with a background image and a footer. I want it to be responsive, so in order to maintain size, I used background-image:cover. Now the problem is that on different screens, the image needs to zoom in so much that a part of it gets hidden, like this:
As you can notice, part of the text is cut. Any idea, please?
As BenM, says, you have to choose between
1) distorting the image
2) clipping it using cover
3) keep blank space on the sides using contains.
However, if your problem is mainly that the bottom of the image has to be always shown, you can set background-position-y: 100%;
This will ensure that the bottom of the image is always shown (but will cut more in the top ...)
Related
I am trying to implement a sidemenu with a background image but I don't understand how to make it responsive also vertically...
I have this image https://ibb.co/Pzyyyh2 whose size is 320x1000px. It's a very tall white image that a certain point becomes black.
I'd like to have this black detail to stay always at a certain point of my sidemenu (the transition from white to black should start before the social link part).
As you can see here, on iPhone X emulator, it works as expected: https://ibb.co/C7Nm6b7.
While on another device such as Moto G4 this happens: https://ibb.co/S7tQwJV
You don't need the white part of the image, if what you're trying to show is the black, then just use the black. If your image is an svg, it will always expand/contract properly, without visible pixelation. The rest of the footer should have a background-color equal to that of your img.
If you want to use skew, then make a first div (the parent/wrapper), then place it right before your footer area. Then inside the wrapper, add the skew-div. Make the parent have overflow:hidden so the excess of the skew-siv doesn't become visible past the borders of the parent.
Like this:
Then, inside your 'magic-div', you'd have the following:
The parent gets width: 100%; and overflow:hidden;. The child skew div inside gets width:100%; too. If you're using background with an svg as suggested earlier, the background-size rule should be 100% auto or cover, depending on the scenario (the widths you're covering + the angle of your skew). Give it a try and let us know how it went.
I'm having a little problem with one of my background images in a div element. I'm using the following CSS:
.myBox
{
background-image:url('....');
background-repeat:no-repeat;
background-size:cover;
}
My background image is a picture with some people on it. Now, if I increase the width of my browser window, at a specific point, some of the people are cutted off (due to the automatic resize of the image with 'background-size:cover').
My question is: Is there any option (or jQuery plugin), to set a specific part on the background image that will be always visible on all window sizes and also fill the whole element?
There are a variety of solutions you could try; however, you might want to start with something simple like applying a background-position.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Using the background image of the group of people as an example, you might set background-position: top so that their heads never get cut off. You can also set the vertical and horizontal position in pixel or percent units.
try boostrap3 img-responsive class
.img-responsive Makes an image responsive (will scale nicely to the
parent element)
http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
If you look at what happens here when you reduce the screen width is that the big photo becomes shorter and shorter, still filling in the full 100% of the width:
https://mmistakes.github.io/minimal-mistakes/
Now, I don't find that appealing and would like to make that photo disappear and become a background of the whole top (navbar) part once the navigation bar becomes the button. However, I would like only a certain part of the photo to show up, not the whole width.
Any hints on how to achieve that?
Update: the tricky part here is that each page has its own image. Since this is jekyll, in theory, I could add a css entry in the <head> of each generated page for setting the background image of the navbar, but I'm not sure whether there is a more elegant solution.
Put the picture as a background for your nav-bar and use the css background-position attributes.
Use viewport and let the image (the img-tag) disappear
I want to set a prefereble image as the background for my website.
Now, an image file always comes with a fixed pixel or size. Lets say that my chosen image is 960x960 px.
But my web page may have different size, may be the size is 3 times bigger than the image.
If I set that image as background, then normally it will repeat (I know how to stop it, but that's not what I want). When it gets repeated, it will make a stripe or a shadow type line at that point where they join with each other. That means, at the image joining point, it makes a separate border (I hope you know what I mean) what looks bad and an user doesn't like it.
How to avoid that?
How can I set a background image as only a single image so that it's not clearly visible that many images are joint on the background.
As an example this is my background image:
background-image:url(img/backgr.gif);
Two possibilities:
Use a graphic program to edit your image so it becomes seamless. Look here: http://www.youtube.com/watch?v=NARVupW2ads
Use background-size:cover; to enlarge the background image so it automatically covers the whole screen.
After the background-image line have this line:
background-repeat: no-repeat;
Right now im using one large centered image in my body tag.
First image is basically what the front page is going to be like. Looks great.
Second image has some content and pushes down the footer and the whole page. But still looks fine.
This last image has a lot of content and pushes everything down, even past the height of the body background image.
So my idea is too split up the background at the change of colour you see in the first image, where the footer starts, and add that as a background for the Footer DIV.
But the issue is that that part of the background goes on past the browser in the first image. If I were to put the BG in my footer DIV it would have to be 500px in height, resulting in scrollbars.
Essentially I want to put the the lower part of the background in my Footer DIV and have it act like the BODY, in that it won't create scrollbars.
I think that was clearer than my previous explanation? It's hard to explain!
So in the first screenshot the background is one big image?
Yes, you need to split the background up.
Now lets assume these things:
1.) You've set the background color of the body to black (and that black bar that is showing is the body background and not a part of the image.)
2.) You have split the image up so the bottom half is the background image on the footer div.
You can eliminate the black bar by making sure there are no margins pushing the footer div away from browser window, and making sure any default margins created by the browser itself are reset. (i.e. body { margin: 0;}) However, the bar can still show up in other browsers (usually Safari). One solution would be to set the background of the <body> tag to the same as the footer tag. This only really works with repeatable images though.
I'd say your best bet would be to fade the bottom of the image to black like you've done at the edges.
You can use background: scroll; to make the content scroll over the background, but viewed at different resolutions you could still see the bottom of the image.