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;
Related
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
Problem occur on Sambungs tables. I have background image set on body.
Css look like
html, body{
background: url('img/background.jpg') no-repeat;
background-position: top; // i tried also cover, fixed etc
}
Webpage is quite high, like over 2000px , where background image takes first 600px, and it could be fine for me, but when i click to hide some box on the bottom of the page, background will automatically appear at the visible part of a screen and it will be eareased from the top of the page. Page isn't realoading during hiding boxes on page, that's why I don't really know how to solve this problem.
Any suggestions ?
Problem solved. I had to input background into div#wrapper. It solved my problem with rendering of background image
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 ...)