For reference, please see this website.
I want to use the faux columns method to ensure the blue background of the #secondary sidebar extends to the bottom of its parent: #main.
However, when I use Firefox Developer Tools Responsive View, and reduce the width of the viewport, #secondary's width becomes a %, but #main's background image remains fixed, so the blue part of the background image bleeds into the #primary content area.
I once read an article where someone used the faux columns method and was able to set the position of the background image to scale down when the viewport was scaled down, so that the colour change of the background image always lined up with the right hand side of the #secondary sidebar.
I am aware you can set the background-position to a %, but this matches a specific point x% in from the left of the image with a point x% in from the left of its parent, so it always stays in the same position regardless of what % you specify.
As kangaroo has written, the solution was to set:
background-size:contain;
for #main.
This CSS property is supported by IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.
Related
https://realisation.github.io/sketch/
I'm trying to get that SVG to be the background and remain positioned flat at the bottom of the red section while the width and the height scales when the browser window is widened/narrowed.
I've tried a number of solutions with background-position, but none of them work -- it has to scale.
There IS an answer to this folks!
It's very STRANGE -- you do not specify the alignment properties of your image in your CSS, if it is an SVG, then you specify the alignment qualities in the SVG!
preserveAspectRatio="xMidYMax"
Did the trick.
I hope what I try is not impossible.
Let me explain first: I have a responsive design which requires a background to be fixed under some situations (media query blocks). The design in question is this one:
http://think-open.at/fileadmin/templates/responsive/content.html
Basically there are two media queries: one for the maximal height and one for the minimal width. If there is enough viewport height there is a scrollbar in the content area and the design height is fixed. But if the viewport is not large enough for showing the predefined height the height-mediaquery removes the scrollbar from the inner div so there won't be two nested scrolling containers (body + div) and sets the content area to height: auto.
There is also a responsive media query if the viewport is too narrow but this works flawless.
Now the problem: When the design switches to the mode where the whole page scrolls (below 830px height) I would like to position the image in the right container "fixed" so it does not scroll out of the viewport. But then the problem arises, that I can't really position the background in regards to the container div as "fixed" positions an background image in regard to the viewport. I have created a CSS fiddle here:
http://dabblet.com/gist/ae5c3598e1465ce0c90e
If you change the width you notice the problem. I would like to have the right border of the image aligned with the right border of the green box.
Is this somehow possible? I have no problem using calc() as there will be a condition in my CMS to use the plain old-school design if an older browser gets detected.
I solved it myself now. Sorry for posting.
The trick was: As my design is centered, I started to try using calc(50% + somepixelvalue). This did the job.
I adjusted the CSS playground:
http://dabblet.com/gist/5b63553f47a81f3bb701
Now the image is always up in line with the right border of the green area. When scaling there is sometimes a 1pixel difference but this doesn't matter as the background will get assigned to some container element which acts as mask.
If you open my page at http://goo.gl/68s0t (Please don't replace the link here as I don't want google to link this page to my site.) in a non-maximized window and maximize it after it loaded, you see the gradient start over again in the lower part. In opera it is one gradient but in other browsers it repeats vertically.
How can I make it not repeat, ie make the gradient adapt to current browser height?
Sometimes, I see blue squares in the lower right and left corner, what causes them?
To answer (2), the blue squares are caused by the background being applied to both the body and the html elements. Since the body is given a small margin (from the browser, by default), it extends downwards a few pixels beyond the html. They both have the same height, the body is just offset by 8px vertically.
The margin on the left and right causes these small boxes.
To fix this, remove the background from the html, only apply it to the body, and change the margin to padding, if you want the space there.
When setting a background-image for a <div> element is the required image size effected by the border?
I'm working on an retina iPhone project with a element that is 100% width. My background image is 640px wide and I'm using background-size to get it to display nicely on the retina display.
If I use a border on my <div> will i need to reduce the size of my image to get a 'perfect' display?
e.g.
320px(div) - 4px(2px border left and right) = 316px
So my image should be 632px (2x316) to get a 1:2 'perfect' pixel ratio.
Background images display within the constraints of the border — that is to say the border is not included in the space that the background displays over (it will display over padding, though).
It may be helpful to your particular case to use background-size: cover (MDN reference)?
I am adding a footer to our organization's website. It looks just fine in Firefox (Mac and PC) and Safari (Mac). But, of course, not in IE 8.
I've got two divs (columns) on the left and middle and within them two rows of links. On the right side of the footer I have an image of our building I'd like to be flush to the top, right, and bottom.
In order to do that I had to make the image part of the background image of the footer. The footer is nestled within the larger content area and that content area has a margin or padding on the left and right sides. In addition, I wanted some extra space below the text so I added some padding (which prevents the image from sitting on the lower edge of the footer.
Here's the test page I am working on: http://americanart.si.edu/collections/index_footer.cfm
I'm stymied. Any fresh look would be appreciated.
The background is in the correct position, but your .col3 inside the footer is covering it. It has a grey background color and is 0px tall in smart browsers, but is rendering at 19px tall in IE even though it has no content. You should probably just remove that div if there is nothing in it.