I'm trying to set a background image to fullscreen, and on window resize the image doesn't change actuall pixel size, but get's smaller (crop-like).
This is what I mean: (Try to resize window and notice that the picture gets smaller or larger but doesn't pixelate) http://jsfiddle.net/G7Qc4/
Now, the above works because of the image is a background of a div and I've set:
background-position: center top;
If it was just plain <img> it doesn't work which my question is how can I make it work? If there is any way around?
I am using the nivoSlider which doesn't accept div's for image's so I will have to use <img>.
Thanks alot
If I understand, you want to use an actual tag as a background instead of background-image.
Here is my solution:
http://jsfiddle.net/ttZeM/
It requires knowing the dimensions of the background image.
There is a div holding the background which is absolutely positioned, the site content is absolutely positioned on top of it.
To center the background image, I moved it -500px to the left, which is half it's width. It is inside of a div that is 0px wide, being centered with position:absolute; left:50% a strange technique, but it works if you know the image size.
Also note that the bg_wrap div has overflow:hidden; and width:100%; this means you won't see scrollbars off the edges of the screen.
I hope this is what you were after!
It can be done with CSS3 (background-size: cover), like so: http://jsfiddle.net/mqchen/Kq3pa/
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 working on a website for a friend of mine. There's only one problem. The slider won't fit in the frame without stretching.
I've set it to 100% height, but it won't work out. (Its also responsive)
I want it to be a nice image in the original width and height (100x100, 200x200 etc) without stretching (200x500).
I hope you guys can help me out on this.
I'd tried alot and also asked some other people but they can't help me with this.
You can see the slider over here.
http://tinyurl.com/p36hz6u
Here's another version of the slider, but on this version the slider image gets cut off
http://tinyurl.com/nfjjvwu
If the images are background images, consider using the background-size:contain; which will allow the image to grow as large as visible/possible without stretching, and then you can position the background image wherever desired with background-position
If the slides have actual physical <img /> tags, I made a JSfiddle that demonstrates code that will contain an image within an element. In this example, the <div> tags represent a browser window and can be resized: http://jsfiddle.net/dds27w2y/
Firstly what I would do is to remove the: background-size: 100% 100% and add a background-position: center center.
Then I would add a background-color: white to the container. This would make it look nicer and it would be centered.
Okay what i cant seem to figure out is I want any image no matter what size to fit to the browser window EXACTLY corner to corner as a background image. what usually happens is the BG image corners seem to overflow to where they cant be seen. like the browser uses the middle of the image sort of but i need it exact! ANy help, would be greatly apprectiated!!!!....
heres the page link http://www.bxwebdesign.com/stack/index.htm and
http://www.bxwebdesign.com/stack/style.css
You want to use background-size: 100% 100%;. This will fill the element exactly corner to corner with your image.
See https://developer.mozilla.org/en-US/docs/Web/CSS/background-size for documentation on this CSS property.
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
My <div> background is shows half how can I fix it.
It shift all my background images to left and half right goes white in IE
here is screenshots
http://scrshots.blogspot.in/2014/11/1st-screen-shot.html
If it's a background for whole page try to attache it to body. If it shows only half of image most common problem is something mixed up with divs. If you have more background images try to provide a frame for them (separatly) using divs. Also are you sure that position should be absolute not relative?
body {
background: url(main-bg.jpg) no-repeat
}