I have a an image not covering the background completely of a div.
Can I specify the height of the image to make it larger?
transparent url(http://www.example.com/picture.jpg) height=??
You can not stretch a background image. Well at least you can not reliably do it cross browser today. The future CSS is most likely to support it, IIRC.
You will need to use a <img> element if you want to use the browser to stretch an image, but this is not recommended.
If you are not wanting to stretch the image, but more some of the background image is cut off, then expand the height of the element that has the background with the css property width or height.
Background images can't be stretched.
Use an img tag with absolute positioning and z-index it behind your other elements.
You should only specify the height of the div. And use
repeat
property of background.
If you need to stretch use an image inside the div and make height and width to 100%.
if the background is just a solid color, you can use repeat-y.
CSS3 does this with http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size. Sadly no browsers support that yet. You have to do a img.
See http://webdesign.about.com/od/css3/f/blfaqbgsize.htm and http://www.kyrnin.com/about/blfakebgstretchexample.htm
Related
Is it possible to set a max height value to a background image that uses background-attachment: fixed ?
I want to use background-size:cover to cover entire div but instead the image covers the whole viewport instead of just div when its fixed. I thought I could set a max height value to the background image but not sure if this is possible?
See fiddle:
https://jsfiddle.net/wcn0wrm3/1/
Unfortunately, you cannot do that. This is how background-attachment: fixed works - it sets your background-image to cover the whole viewport. background-size:cover in this case is totally useless. What do you want to achive with this styling?
I have a div (div#slideImage) and within a few images.
But this is not div by adjusting the images inside that div.
See the full page.
Note that the size of the div (width: 75px; height: 28px;) is smaller than the size of the image.
I'm using the plugin jquery.cycle
This probably isn't what you were expecting, but can't you just resize the image? It seems to make more sense to me than expecting the div to do the work for you.
If you specify the dimensions of a div, then contained nodes will either be clipped or scrolled depending on the div's overflow property. Your best bet is to set the dimensions of the div to more useful values.
If i have a body using a background image and a div inside the body using a set background and color, how can I override the div's style to use the body's background image? I don't want to simply set the background of the div to the image as positioning of the image will be off.
I don't want to simply set the background of the div to the image as positioning of the image will be off.
You mean you want the body's actual background image to be visible (not just the URL being inherited) even though the div has a background color defined? That is not possible.
You would have to give the div a background-color: transparent to make the body's background image shine through.
The W3's background-image documentation specifies that inherit is an invalid declaration for the property.
It seems redundant to post the same information as #Pekka, but his work-around is, probably, the best non-inherit option available; although Eric Meyer's 'Complex Spiral' demo is also an option, which combines position: absolute; with multiple different versions of, essentially, the same background-image to achieve quite an impressive 'tinted/coloured' effect.
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.
I have a vertical menu using lists (li) and I've got it changing background color on hover.
#limenu:hover {background-color:#000}
However, I don't want the background to fill 100% width. Is there a way of setting the background width or creating a padding on both sides?
There will be a background-size property that does exactly what you want in CSS3. But, it will be a few years until this is so widely implemented that you can develop for it safely.
Until then, bytenik's suggestion (or resizing the background image server-side) is the best that can be done.
There's no way of setting background width. However, you can simulate this effect in this case by setting a padding and then using overflow to allow your content to overflow the box. The background will still be constrained by the box even if the content is not.
There's a background-size.
i.e.
background-size: cover;