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)?
Related
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+.
I have a single gif image (1px X 1px) which is used as a border for 960 grid framework of my website.
All the layout fits in the correct place in normal state even on increasing the zoom percentage also.
PROBLEM: In case of decreasing the zooming level, border is invisible for certain zoom levels.
e.g. it is visible in 80% but not for 90%.
Is there any cross-browser CSS code OR any other fixes for this issue?
Can we use any specific CSS property to restrict re-sizing background image for browser zoom?
Thanks
I have an image inside a div. For example's sake, let's say this div has a background-color of #000. Now, I want this image to fade from the left, to the right.
What I mean is, the first column of pixels should appear to have 100% opacity, whilst the final column of pixels should appear to have 0/1% opacity (the final column of pixels will blend in with the background of the div).
How would I do this purely in CSS? The image will always be 50x50.
you could overlay div on top of an image
and set gradient for div
http://tinkerbin.com/xXJQrgnk
Do you always know the background color of the DIV ahead of time? Is it always a solid color (not a gradient, no texture, etc)? Are your images roughly the same width? If so, I'd create a PNG that is the same color as the background, and have it fade to totally transparent at the right side. It can be any height since we'll tile it verically.
Drop the PNG over the image after you give the PNG the same height as the image and it will appear that the image is fading out into the background.
I have an image that I want to use as a background-image for my footer. Its sort of a gradient image, so the will be white, and the image will fade from its color, to white. It's not really a repeatable image though.
If I want it to always span the entire width of the page, is this possible without a background-repeat? Or, because of different monitor sizes, will this be impossible?
The background image I want should only be in the footer of the page. Like a sticky-footer, it should always stick to the bottom and the content will push it down as needed. It's about 400px in height.
It could still be a background (positioned bottom-center) but it can;t take up the whole height, just the width. And it need to be able to be pushed down (not fixed)
If you're comfortable using CSS3 you can use
background: #fff url(image.jpg) center center fixed no-repeat;
background-size:cover;
to have the image cover the screen. You'll want to be careful that it is at least a decent resolution though.
I want to build a fixed width website which is 960px wide and aligned to the left. However, I want to use a background which is wider than 960px and that fills the space to the right if the user has a screen wider than 960px.
This is easy using a background image:
body {background:url(myreallywidebgimage.png) 0 0 no-repeat}
#wrapper {width:960px;}
But can I do it where the background is an SVG, without a horizontal scroll bar appearing?
The only thing I can think of that would turn off the horizontal scrollbar is to do something like as follows:
#wrapper {width:960px; overflow-x:hidden}
Edit: Upon further reflection I decided it was best to see if Google offered up an other possible suggestions and I came across this: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. The above solution will only work if you assign the background to that div element. You can, however try assigning overflow-x:hidden to the body itself to see if that solves the problem as well. Hopefully these suggestions help.
The background will scroll only if your SVG image has pixel dimensions which exceeds that of the browser window. If you set the image to have 100% width and 100% height, the background should not scroll.
Take a look at this web site. They're essentially doing what you want. They have an SVG gradient as the background. As you resize the browser, the gradient adjusts to fill the entire window.
http://emacsformacosx.com/
They also have a lot of other SVG on the page, but the background gradient is all you need.