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;
Related
I'm getting started with responsive design and just built this very basic "responsive" image sequence http://goo.gl/iMGRkL using the img tag.
Now I'm trying to do the same but using background-image instead of the image tag.
Is it possible without Javascript? I tried a few different approaches, including this http://goo.gl/AstSdl, but no luck so far.
Thanks in advance.
If you are using the css property "background" or "background-image", a good way to do it is to give the particular background image a parent such as a header, div, or section. Then you can use the css values "center" to center it in the parent container, and "cover" to make the image cover the parent div container. You can also play around with pixel and percentage values here. Another thing that is very important is to set the background repeat to "no-repeat" in your css so it doesn't repeat. This code will make it so that the image will cover the parent container at any width or height.
ex: background: #ffa949 url('example.jpg') no-repeat center / cover;
After doing that, the image may still looked a bit scrunched so it would probably still be a good idea to add some media queries.
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'm having some problems traying to place 3 images into a background, I mean, I have one image on top, actually a is 2000x550 pixels, then I need to leave 200px (vertical) and place another image that cover also the all the center and them one image into the footer.
Do you think that is better to make a full image a place it? full it's about 30KB. Or there is any way to place it using css?
Kind Regards
You should be able to achieve this with css z-index. See the following links for more information:
W3C Schools explanation of z-indexes:
http://www.w3schools.com/Css/pr_pos_z-index.asp
Indepth explanation of z-index's from Smashing Magazine:
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
To answer the question of how to place the header image, the best way would be to define a div with a specified height (a 550px tall header seems awfully large to me, but hey, its your site) and width (probably set to 100%), and use the background-image css property to place the image there. This will prevent any side-scrolling.
A sample of the what you have going on to go with the sample images would be nice. From your description though it sounds like you have not implemented the z-index properly. My guess is that you need to declare the position of the divs you are adding a z-index to. Even if it is position:relative you still have to declare it or the z-index doesn't work.
-- Edit for real answer --
After looking at your images this is not actually that hard to implement. Here is how I would do it -
Set the background of BODY to white and the green/pink/gray background:
body{background:URL(images/green-pink-gray_bg.png) #fff no-repeat;}
Set the background of the DIV to the gray image -
div#gray{background:URL(images/gray_bg.png) #fff no-repeat;}
There is no need to set the z-index of anything since the div with the gray background is already "on top" of the BODY of the page. Using PNG images with transparent backgrounds will allow the white background to show through anywhere it is not covered by one of the background images.
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 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