I folks. This might be more of a design question but I thought I'd give it a whirl in case someone had some masterful CSS techniques I could use. If not, I'll brace myself for the onslaught of down-voting and nay saying!
You can see the logo holder here has a background image with a nice gradient to the right, and is obviously semi-transparent. My client is looking for a gradient at the top and right side. Any ideas on how I can accomplish this?
alt text http://www.linkhostmedia.com/blog/wp-content/uploads/2010/01/Screen-shot-2010-01-28-at-4.31.45-PM.png
Thanks in advance.
The most obvious solution would be to use a partially-transparent image as the background-image for the container-div.
#container_div {background: transparent url(path/to/image.png) bottom right no-repeat; }
Related
I'm trying to have a background image use up all the space of it's container.
Things looked pretty straightforward, using background-size:cover but it doesn't work properly.
the page I'm working on can be found here
the background image is declared inline in the div with class x-bg-layer-lower-image:
<div class="x-bg-layer-lower-image" style=" background-image: url(http://jeango.net/thesphere/wp-content/uploads/2018/03/background-header.png); background-repeat: no-repeat; background-position: center; background-size: cover;"></div>
when I inspect in chrome, i clearly see that the div has it's height and width correctly occupying the entire screen. Yet the background image doesn't use up the entire space (see screenshot)
I can't see what I'm doing wrong here. Perhaps someone can help
Lol, Don't mind but you are such a headache man, I wasted around 30 mins finding a solution for you... Look at your background image once, it already has white spaces in top and bottom. You CSS is correct. Try opening the background image in browser and see.
Ha ha ha.
Good evening,
I am a bit stuck on a project I am working on...
The image in the header of this site, when downsizing the screen, the image doesn't respond, it simply gets cut off on the right hand side.
Can anyone help tell me what I am missing? Thanks in advance :-)
If you don't want your image would be cut off then use 100% background-size but it stretch the image:
div{
background: url(path.jpg) no-repeat;
background-size: 100% 100%;//but using cover would be better to look
}
I am so sorry for asking this question here because I'm pretty sure it's not 100% what this forum is for (although it is CSS I presume) but I asked on another forum and no one understood what I was talking about!! So I thought: I'm 100% sure someone here will know!
What is the website box shadow (I think it's a CSS box shadow?) that they use on websites like this one:
http://www.rcgp.org.uk/
-the box shadow I mean is to the left and right of what I assume would be the body container and it helps give the page a general frame - of note the shadow slowly fades and disappears completely by the end of the 'Find Courses & Events' box.
Thank you in advance and I appreciate your wisdom!
This page uses a fixed width container (940px, #wrapper) for all content. The shadow is simply an image which has just the correct dimensions:
body{
/* ... */
url("../images/main-bg.jpg") no-repeat scroll center top transparent;
}
I have a following situation:
Div has to have a solid color on top, and then at the bottom thee should be a transparent image 1px wide.
(So final look should be that I have a gradient from top to bottom of div)
When I put :
background: #fff url("../../images/bck1px.png") repeat-x scroll center bottom transparent;
white color is shown over transparent image
I have to do this in CSS2 style!
Can anybody help?
Here is a link... maybe this is what you want to do.
If yes, the trick is to use the image and have it align in the bottom of the div and repeat horizontally. The clear is there to make sure to push the bottom of you container div.
http://jsfiddle.net/etienne_carre/GEkFn/
Good luck
It’s not entirely clear what you’re asking — a transparent image is transparent, so it won’t create a gradient.
In the code you’ve posted, you have applied a white background colour as well as an image (background: #fff url...). If you leave out the colour (background: url...) you shouldn’t get white any more. I don’t know if that’ll solve your problem.
If you could post all the CSS applied to the <div>, that might help.
If someone ever arrives here, future has finally come and there is better ways to do it.
Please refer to the following links for a CSS method:
Gradient opacity on the bottom of div
Can you use the CSS Filter attribute for IE gradients AND implement a background image?
/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c8bcf', endColorstr='#0068b3');*/
As far as I know the background has to be "transparent" or none for the gradient filter to work..
perhaps you could wrap the gradient div with another div and put the background image on the outer one?
Wait! it does appear to work, glad I checked..
Working Example (IE only)
sorry about that I really thought it didn't work with a background, but couldn't find a reliable source - anyway in that fiddle above I changed the gradient to go from transparent to black
I'm not convinced that it can be done. It appears that in the jsfiddle above, the hex values have an extra 2 "0"s in them. if you set the values to actual hex chars, the example does not work. perhaps the background will show through if the gradient is going from transparent to a color only