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.
Related
I'm using slick to make an image carousel. I've got it working but I want to be able to have the center image scale and be bigger than the others. I have it kinda working but the height of the container does not change when the image scales meaning the image flows outside the container and doesn't scale in height properly. I want it to work like it does here on the demo for center mode http://kenwheeler.github.io/slick/
How can I get the height to change when the image is scaled?
If you carefully see their demo and increase the scale size, then you can see that even in their demo the white box will get cropped.
The solution is to give a margin to the slides so the central image has place to be seen. Following code will help you achieve what you want:
.slick-slide {
margin: 50px 0;
}
All I have done is, added margin top and bottom. The end result is that there is white space above and below the slides that are not active, but the empty space is covered by the scaled image in the center slide.
Working CodePen:
https://codepen.io/vikrant-icd/pen/vZjMPq
I am creating a website as part of a University project and am tying to get a parallax effect on some images. I've been following the tutorial over at W3Schools...
https://www.w3schools.com/howto/howto_css_parallax.asp
My problem is that the images are filling the width of the screen rather than the div, causing them to be hugely zoomed in with the top and bottom cut off. Is there another way of doing this?
If you want to remove the zoom effect and show the parts of the image that are cut off, you can change the background-size property to:
background-size: contain;
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.
First time on stackoverflow, also my first time with HTML and CSS.
Basically I want a transparent image to be kind of "hooked" on to one specific point on the background, i.e. if I resize the browser window, the image should maintain its position relative to the background and should get smaller accordingly.
The reason I need this is because the image is animated and positioned to a certain spot on the background.
The easiest way I could show it is by actually showing it so: www.opinionoto.com
As you can see I want the speech bubble to always be right beside her face and maintain its position no matter what device or browser size.
This would be great help for me, I'm a super begginer! Thanks in advanced!
why not use multiple background images and position the second one accordingly where ever you need it?
Does the bubble move after the initial move? Can you just make the background a GIF image?
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/