0

I am doing a project on a country which consists of 3 html pages, and I have decided to put an image of the country's flag as the background image for each page.

I want to change the opacity of the background image, but each time i try and do it it changes the opacity of all the other content of the page - the text, headers, etc etc.

I have this line of code in my html:

<body background="flag.jpg">

and then in my css I have tried various things. I have tried giving that tag an 'id' like flag, and then tried:

#flag {
        opacity: 0.2;
}

I have also tried just using 'background' instead of using 'id'.

I've been trying to figure it out for a while and can't get it, any advice will be appreciated! Thanks.

Conor
  • 15
  • 1
  • 3

2 Answers2

2

add another elementi with the #flag that will be the "background", for example

<body>
    <div id="flag"></div>
</body>

and an style with the flag

#flag {
    background-image: url("flag.jpg");
    background-position: top center;
    background-repeat:no-repeat;
    opacity: 0.2;
    position:absolute;
    width:100%;
    height:100%;
}
TriForce
  • 415
  • 2
  • 8
  • great, thank you very much! so would the tag go in between the div tags? – Conor Feb 24 '17 at 15:25
  • body is the main html/website tag, u can apply styles to it, but personally i never touch the body, i made more containers inside... so the main parent is body. if u set styles to body (opacity, width, height, font styles, etc...), everything will be inherited to elements inside – TriForce Feb 24 '17 at 15:33
0

You cannot use opacity like this.

One solution is to use background-gradients like this:

background: linear-gradient(rgba(93, 41, 28, 0.8), rgba(93, 41, 28, 0.8)), url(https://images.pexels.com/photos/31044/pexels-photo-31044.jpg) fixed;
Capuchin
  • 3,465
  • 6
  • 28
  • 40
  • thats not very useful because u cant set a transparent background color... and another thing, if u set opacity to body, everything inside will have that opacity... – TriForce Feb 24 '17 at 15:35