I know how to center a web page with CSS, but I have no idea how to center it with an overflow of an oversized image/slider on both the left and right side. A perfect example is Square.com. The image is 1455px, but the window container is set to 1020px. But when you make the window wider,more of the image appears on the left and right, equally. I tried every version of the CSS code I can think of, but no luck. The 1020px container usually cuts off both sides of the image. So I was hoping you guys can help me out with the code that would achieve this result.
You can just set the background-position : center center; and it'll bleed off the ends.
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.
Before asking this, I've been googling and trying various things myself....I know this can be accomplished, even though I haven't found a solution anywhwere.
This is the site...
http://spiralout.org
Notice the background image on the body is centrally aligned with the center of the logo (at 1440 wide), yet it's fixed when you scroll. That's great.
How do I make this responsive?
Right now, I'm using background-position at the various breakpoints, but it's not a real solution...for example. It's aligned right now at 1440, but go down to 1280 (the lowest width while keeping 4 columns) or further and you can see what I'm talking about. How do I get the background image to "follow" the logo div?
I've tried using percentages for background-position, but the logo is a different width, and inside the container so it's percentage from the left side of the screen will always vary proportionately to the background image.
I've tried using it as a background-image on the logo div but I don't seem to understand why it doesn't overflow to the top or left. Even if this solution worked, I don't get to keep the fixed position.
Any help is greatly appreciated.
I don't care if the cost/benefit of doing this is ridiculous, or if the solution has to be jQuery, etc. I just want to know how to accomplish it for my own sake :)
If I understood correctly, this is only what it takes me to do it:
body
{
background-image: url('whatever image');
background-repeat: no-repeat;
background-attachment: fixed;
}
I'm making a webpage where I have a div ("container") that is a parent to the div "rounded". For some odd reason, the webpage doesn't let me scroll down even though both of the divs' height are larger than the screen.
Here's a jFiddle with the components that aren't working out: http://jsfiddle.net/pmg92/19/
Any ideas as to why this isn't working?
You need to take the position:fixed off the .container so that it allows the page to be scrollable
EDIT
Check this out here http://jsfiddle.net/pmg92/23/ I think this is what you are looking for. I took out the non relevant css so don't just copy and paste to yours. I eliminated your background rounded image in place of using border-radius because by using a background image you can't really shrink or expand depending on content. This won't work on older browsers unless you use webkits and so on.
If you want to use an image I would suggest slicing the image between a top, bottom, and middle. The top would contain the top section with the radii. The middle would be 1px tall that repeats vertical as needed. The bottom would contain the bottom section with the radii.
The problem is that you have the position of the container fixed.
Im a novice, apologies up front if this is unclear! I know what I want, but Im not sure how to get there or if its even possible with HTML/CSS. Ive been trying for a week with no luck.
The main content area is 955px wide. In the header, I have a logo in the upper right corner of this 955px width, but would like the logo to continue to the right, for computers that have a higher res. So the main header area is set to margin: 0 auto, and I can put a 1px wide sliver to repeat to the right which is ok, but I would prefer the image to continue, not just some boring gradient.
Is this possible?
I created this image to show what I mean but cant post it because i need 11 rep and have 10. ;)
In it, the logo has been split into Image 1 & 2, but of course, if its possible to overflow the centered 955px wide header, then it could be one image.
I can get it to work fine with two images, as long as the window width isnt altered - then you can see Image 2 moving and doesn't line up with Image 1.
Thank you for any help!
Thanks to both Tullo and COBOLdinosaur - I couldn't get your suggestions to work right (probably more to do with my lack of skills) but you guys helped me figure out the solution to my problem. Here's what I did:
Created the image in one piece, rather than two images. Floated right within a 955px wide main-header container div. And then I used negative margins to push the image further to the right. This seems to work great.
Thanks for the help!
Put the image in a div with a width of 100% and with a background color that matches up nicely with the image. Then for the CSS on the image remove the margin and include
clear:both; float:right;
Take a look at http://jsfiddle.net/7zb6P/1/
Both the yellow box and the background image are centered in the scrolling div, although their center is slightly different. This seems to be due to the background being centered to the whole area (including scrollbar), but the div being centered to the content area (not including scrollbar) - see it centered correctly without the scrollbar http://jsfiddle.net/7zb6P/2/
Interestingly IE7 renders it "correctly", but IE8+ and other browsers render it as described above.
I have had a play around with background-origin (and -webkit-background-origin) but none of the properties seem to have any effect.
Any ideas on how to solve this?
EDIT: More information: The linked fiddle is just a minimal example of the problem, my actual problem is with whole sites where the is centered (with margin:0 auto) and has a background image centered (using background-position: center top). The solution needs to work on a large number of sites of which I cannot change the HTML, so it needs to be a CSS based (or possibly Javascript based) solution. Thanks.
The problem resides with your background image. You're trying to center an image that (for CSS's purposes) has no center.
The image is 321 pixels wide. Which means the center of the image is 161.5 pixels. As the browser is unable to render that position it gets a 1 pixel offset.