CSS text inside div can't get fluid background using transparency.

[HeyKitty]

		* {
            font-family: "CustomFontA";
			/* background-color: #97bce0; */
			background-image: url("images/bukah.jpg");
			background-size:cover;

        }
        .box {
            margin: auto;
            margin-top: 1%;
            border-style: groove;
            border-width: 5px;
            border-color: #F7567B;
            background-image: url("images/whitebukah.jpg");
            max-width: 1300px;
            border-radius: 25px;
			box-shadow: 4px 4px 16px #000000;
        }
        h1 {
            font-family: CustomFontA;
            font-weight: normal;
            text-align: center;
			background-image: url("images/whitebukah.jpg");
            font-size: 72px;
            line-height: 30%;
        }
        .box p {
            font-family: CustomFontB;
            font-weight: bold;
            text-align: center;
			padding-left: 3%;
			padding-right: 3%;
			background-color: transparent;
            font-size: 24px;
            line-height: 175%;
        }
		iframe {
		    display: block;
		    margin: 0 auto 0 auto;
		    width: 75%;
		    margin-bottom: 3%;
		    box-shadow: 2px 2px 8px #666666;
		}

So here is the CSS. I am having a problem with text inside a div.

So the .box div has a background image. and the webpage has a different background.  I want the text to match the div.

When I set the text background to:

Transparent, I get the webpage background

to the div image location, I get an ugly seem where its just overlaying the image.

[Mr_KoKa]

Can you make jsfiddle example? Maybe it has something to do with you setting background image to every single element by * selector?

[HeyKitty]

5 minutes ago, Mr_KoKa said:

Can you make jsfiddle example? Maybe it has something to do with you setting background image to every single element by * selector?

That was it... Changed it to body and all works great now.. Thank ya!