Making text stand out in front of images
I'm trying to make my text stand out in front of my image. I've seen sooo many websites that do this well: e.g. http://brewsters.ca/
However I clearly am not: http://immehabayas.com/
I wanted to know what exactly are they doing to the images so that the text stands out so well (even without one of those containers with opacity).
NOTE: I'm not looking for: "why don't you use a black container with an opacity.
The website you showed as example uses a very thick/bold and big font. They also modified the background to be monotone and have a "flat" color to create more contrast. They seemed to have blurred some zones so the details of the background pictures don't mix up with the text.
It's possible you can't do that to the images on your immehabayas.com website though, especially if it's a responsive website. Unlike your website, it doesn't matter if details from the brewster background are lost to increase the contrast of the background + text; you might want to show the details on your pictures though. A very big and soft drop shadow can create a similar effect, and you can do this in CSS instead of adjusting each slider images separately.
Your website uses a small and skinnier font and uses the original image. Your text is white and the background image has a lot of white sometimes. That's why you can't get the same effect on your text.
Maybe an idea could be to add a very subtle blur behind your text, and select another font that has a bit more impact. You could also add a subtle black shadow around that text.
Some examples of what can be done:
These examples use OpenSans extra bold.
BLACK DROP SHADOW + BIGGER FONT
BLACK DROP SHADOW + EVEN BIGGER FONT
BACKGROUND TRANSPARENCY + BIGGER FONT
BACKGROUND COLORED BEIGE BLUR + BIGGER FONT
BACKGROUND COLORED BLUE BLUR + BIGGER FONT
Here is another way you can add more emphasis on your text when used on a busy background.