Background modification for website

Content
1

I’m looking for an idea (or even better - realization :wink: ) to make the following background more compatible with transparent banners (image of boots with text in this example):

As you may see, dumbbell is dark grey, surrounded with too bright colors. This makes text hardly readable, so in my opinion, there should be less contrast difference. I’m not sure what are the viable options here, perhaps you might have any nice ideas?

Thanks!

Here is the source background: http://shrani.si/f/2U/12C/2yxAUglq/istock000004112327medium.jpg
And that’s how website will roughly look like (with different background amongost other things of course): <snip/>

2

My preferred option is to put a box around the text with a semi-transparent background, so that you can still see the underlying image.

3

Or maybe try adding a blur option to it ( gaussian blur - 5-8px )!

4

Where should I put Gaussian blur to, banner (slider) or on the background?

Won’t semi-transparent square block around banner make design less minimalistic, modern and sleek?

5

I don’t think you can do that with CSS—unless there’s some experimental new feature I haven’t heard of.

Won’t semi-transparent square block around banner make design less minimalistic, modern and sleek?

Heh, what I’m suggesting is very modern and all the rage, as far as I can tell. And you need the text to be readable, too, after all. A subtle transparent bg color should be fine. E.g. something like this (replace the background color with an image):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

body {background: #108a7f; }
.wrapper {display: table; text-align: center; margin: 0 auto;}
.wrapper div {color: white; font-size: 3em; font-family: sans-serif; padding: 30px; background: rgba(0,0,0,0.2); border-radius: 10px;}
i {display: block; font-style: normal;}
b {font-weight: normal; color: #f96c6c;}

</style>
</head>
<body>

<div class="wrapper">
    <div>
    <i>Hiking Boots</i>
    <b>20%</b> Off
    </div>
</div>
			
</body>
</html>
6

I made some experiments with css3 blur check it out :smiley: http://jsbin.com/OFIreya/4

7

Ah yes, I have seen the blur effect. It’s not widely usable yet, and sucks a lot of power, from what I hear, but certainly something to watch. :slight_smile: