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;
}
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.
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
I have a bar at the bottom of the website for certain content. The problem is that it's currently not extending (width) to cover the entire screen despite the code to do so.
HTML is rather basic
<div class="bottom-ulity">
other content goes here
</div>
CSS:
.bottom-ulity {
height : 57px;
width : 100%;
right : 0;
position : fixed;
bottom : 0;
background : url('../images/inner-show-text.png') repeat-x left top;
z-index : 1000;
}
I have tried giving a min-width: 100%, tried adding the 2046px as min-width. I looked at some other pages and saw recommendations with "background-size: 100%" and "background-size: cover". Both of these lines of code give the same result, it makes the image itself extend properly however it loses all its effects such as the gradient and instead gives me a basic gray color.
I tried deleting all the divs inside to see if the code inside was causing this, but that wasn't the case either. When I added "background-repeat: no-repeat;", I noticed that the image would only show up once and it wasn't extending at all, leaving a massive gaping hole on where the bar is supposed to be (zoomed out far enough obviously).
Here's an image showing the issue:
I found a hack for the problem, at least one that will be good enough temporarily. I decided to add background-size: 100%
to the css which seemed to fix the problem until I started to zoom in. While the image itself was one and extended 100% in width as it should have, it would start to move up the screen despite being a fixed position with bottom and right set at 0. What I decided was to add
background-size: 200%;
This fixed the issue though that border that is part of the image obviously is twice as big at the moment, which means while it works perfectly, the border being twice as thick it doesn't quite as elegant.
UPDATE: A fix to that solution is simply lowering the px that will be duplicated if the img allows in half. Since the background-size is at 200%, it means everything is multiplied. So if you have a different % to fix a similar issue, keep in mind how many pixels you had before making changes.
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.
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;