I'm having a bit of an issue with some CSS.
In the main content section I am using a background image, within that image is a transparent element which shows the background below it. This is fine and does what I want.
The issue is that I want to also specify a background colour so that if the content is longer than the image then the background continues. However, if I add a colour to the background, I lose the transparent part of the background image.
Is there a way to use both a transparent background and a solid colour on the same div but have the colour position be lower than the transparent part?
Here is the background with the transparent element showing the background underneath:
And I'm trying to avoid this, the sidebar is longer than the main content so the background ends early:
I solved this just by making the background image stupidly long instead.
Not a great option as I would prefer to keep image assets minimal, but it will do.
Related
I have a div 40x40px, border 0, padding 0 with a background-color. on top I have a transparent png 40x40px which has an transparent area inside where the background color is visible through it.
My problem: the background is also slightly visible on top and right of the png like a small border. I want the png covers the whole background so that the background color is only visible through the transparency of the png and not at the two borders at all.
Here's the page: http://goo.gl/pFTcRr
Looks like it's your image that contains these borders.
Zoom a lot on your picture et you will probably see it :)
I have a div containing pictures that will be updated frequently on WordPress. I would like to avoid having to edit the border of each image. This is kind of a dome-shaped border around a group of 8 photos that I created by using the clipping mask on Photoshop.
Is there a CSS trick I can use to make the border.png file overlay the div with the pictures and become transparent and block out the areas that it covers on the picture div?
Using border: none will remove the border, but also will remove the artificial "padding" from the width of that border. If you want the spacing to stay the same, you can do border-color: transparent. Note, however, that IE6 and earlier do not support border-color's transparent property.
I have encountered a few problems with CSS radial gradients.
My very simple prototype can be seen here http://payment.hvan.lt/pt/.
In Chrome/Safari/Firefox background gradient is shown correctly, however, as page does not have content to fill the whole screen, background just stops and a half of the screen is white. If I use repeat, then the circle repeats too and I get what I don't want to.
In Opera the gradient background is not shown at all.
What I want to do is that we could see that white circle at the middle top of the screen that would turn to #e6e6e6 background to every direction and would fill all the page, no matter how much content there is.
Set height of body and html tags to 100% and the body background will fill the whole page. (works in Chrome, haven't tried another browsers)
I've just got a quick question that if you have time would be great to have answered.
I'm working on a new site for a woman that is a fixed width site. She wants her background image to take up the entire span of the browser window and then the image that sits on top - she wants to be transparent so that the background can show through.
I've got the background image to take up the entire window but for some reason the transparent gif is not behaving as it usually does. The transparent image is the entire left half of the site.
Any ideas on this?
http://www.winteradagency.com/Arvin/test-bg.htm
Remove the CSS background color from both #container and #homeLeft.
Well, your CSS states
background-color: #D0D9A4;
for #homeLeft. Simply drop that.
I'm setting up a design that uses some gradients, and of course that causes issues. What I want is for my one background image with the vertical gradient to be the main background, but then if the content extends and pushes the div out, I want a different sliver image to repeat on the bottom. Is it possible to do something like this?
The closest you can get is using a background color with your background image. Then set the image to non repeating. Then the color will be the background for the parts of the div where the backgound image is not.