I have a page with a large background image. The menu and main content portions are 900px and centered. Rather than just fill the menu background with a color, I'd like to simply blur the background image. I'd also like the blurred part to move appropriately when the page is resized so I can't just blur a section of the background. How is the best way to achieve this? I tried putting a semi-transparent .png as the background to my menu div but that didn't work, I didn't see any effect. Does anyone know how to do this? Thanks.
The site that inspired the question is this one: http://www.bluespooncoffee.com
http://jsfiddle.net/MAbpx/
background: rgba(255,255,255,0.5);
This makes the background of something semi transparent because the last value is the alpha (transparency value). Adjust as needed.
Related
I have a page with a black, starry background and the navbar has white text. The navbar stays at the top when you scroll, and the links of the navbar become almost invisible when they pass over other images on the page because the navbar is transparent. How can I invert the color of the text based on whatever is directly behind it?
You want to use mix-blend-mode: difference;, like here: https://jsfiddle.net/avdeoq97/
But it would be better to give your navbar a different background, like a dropshadow with a glass effect, so it can always be seen. The inverted colour alone might not be very accessible.
Background behind button should be like block background. Button can change its width.
How I can realise this?
This might be done in a lot of ways, here's just my first idea:
Use a mask like this:
Make sure your background-image covers the whole button
Insert two white divs above the background-image: left & right of your button
Insert a Mask like the above as the buttons background
Due to the transparent area (indicated by the texture) you are able to display a border-like part of your background image while the rest of it stays invisible, because its overlapped.
I illustrated the result of the instructions above
I have an image that has some white on the edges, and I want to change the background color of the div that the image is contained in. Now when I do this, I can still see the little bit of white surrounding the image, and it looks terrible.
Is there a way I can change the background color of the image to whatever the background color of the div is, and would this be the best way to do it? Or does it make more sense just to edit the extra white out of the image.
You should just fix the image.
If the image has a transparent background then you can change the background color the same way you would a div.
Edit You may also want to check to make sure there is no padding, borders, ect. that would cause this issue to happen
Looking for some hints and tips on how I could implement the design below in html/css:
The candle is an image. The green background is a tiled background of a div that contains other elements while the pink background is the background of the whole page.
How do I put the candle image in such a way that the most of it is inside the div with the green bg and then the small protruding part of the fire has for its bg the pink pattern? Note that the pink patten is the bg for the whole page.
The green image
I would make the candle a transparent PNG file so I don't have to go through the hassle of building a candle image that has the stripes and dots of the background images aligned correctly.
That may create issues in IE6 if you use alpha transparency, but there are workarounds for that.
Then I'd place the candle in a container with float: left or position: absolute (Depending on the rest of the layout), positioned to the left hand side of the green area.
The image itself would then get position: relative; top: -50px (adjust accordingly) to move up outside the content container.
Try this example.
For the image, you need a transparent png or gif file to look though at the green and pink pattern.
I have a a background image on my html with css page, from blue at the top, to white at the bottom.
However, the image 400x800 and the page is much longer, so it repeats.
The page length varies all the time.
Is it possible to solve this so the background stretches to the page length somehow? or maye make it not repeat and make the background white with the image on top?
If yes, how please?
The easiest is to set the image to not repeat and then set the background color the same as one end of the gradient:
body {
background: white url('yourImage') repeat-x top left;
}
Getting a gradient to stretch to fit the window is doable, but is more work and would require some javascript.
I know that there are jQuery / Javascript methods of accomplishing this:
Resizable Backgrounds with jQuery
Stretch background image - jQuery - Demo
but besides resorting to solutions like those - you could:
Select a pattern for your background that repeats (textures etc.)
Create a very long background image that could handle most navigation that your page
would deal with.
Another alternative is to make your gradient the same at both ends with the maximum colour difference at the 50% mark.