[Aussie]

Hello,

I'm learning web design, I'm attempting to do something which I'm failing at.



That is the first thing you see on my website, now I'm attempting to make that blue somewhat transparent and fit an image of this (Sydney operah house):

(Somewhat large image)
Spoiler (Click to View)
https://i.imgur.com/yWLbP5O.jpg


That is my aim, I envisage that it will look good. Please help me do this. I assume the background-image: tag will be used for this.

I'm trying to create an effect like this:


As you can see, the blue is transparent and you can see the image before it.

Please help me achieve this, it will help me become less of a noobie.

Regards,

[Mr Slothells]

You can change an images opacity with css and can be achieved as such

Code

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

<img src="IMG URL HERE" />

[Aussie]

You can change an images opacity with css and can be achieved as such

Code

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

<img src="IMG URL HERE" />

Is there a specific way I would get the image to fit inside the image perfectly inside the specific area div? I've tried overflow-x and y, which doesn't seem to work in this case.

Thanks for your help so far :)

[Mr Slothells]

Is there a specific way I would get the image to fit inside the image perfectly inside the specific area div? I've tried overflow-x and y, which doesn't seem to work in this case.

Thanks for your help so far :)

The only thing I can suggest if to make the image the background for that specified div, this way it will only work as long as the div is the correct size