CODEWITHSUNDEEP
htmlcssbackground-imagewrapper
Angeline Slayton
Angeline Slayton

Reputation: 21

Background CSS NOT SHOWING behind wrapper

I've tried the background-image tag in my CSS and also in a tag in my HTML. I can't get anything to appear behind my wrapper. I can get my wrapper background to appear with color, but that it. 

html,
body {
    background-image: url("https://vgy.me/u/TpG24N");
    text-align: center;
    height: 100%;

}

#wrapper {
    margin: 2% auto;
    width: 875px;
    height: 80%;
    box-sizing: border-box;
    background-color: rgb(250, 194, 245)
}

#subwrapper {
    position: relative;
}

Upvotes: 1

Views: 205

Answers (3)

Poul Bak
Poul Bak

Reputation: 10930

You set a background-color in #wrapper, that will not show anything BEHIND it. Simply set:

#wrapper{
 background-color: transparent;
}

Now the element behind #wrapper will show through.

Edit`:

You can also make it semi-transparent, if you want, keeping your color and set opacity to a value between 0 and 1, like this:

#wrapper {
    background-color: rgb(250, 194, 245)
    opacity: 0.5;
}

Now the #wrapper will have a semi-transparent color. Experiment with the right value for opacity, until it looks like you want.

Upvotes: 1

Shakil Hossain
Shakil Hossain

Reputation: 1743

You did not add image extension URL 

html,body {
    background-image: url("https://vgy.me/u/TpG24N");
    text-align: center;
    height: 100%;

}

Also, Need to add 

#wrapper{
 background-color: transparent;
}

Upvotes: 0

kite.js.org
kite.js.org

Reputation: 1649

your background image url https://vgy.me/u/TpG24N is not refer to an image, do you mean https://vgy.me/TpG24N.jpg

html,
body {
    background-image: url("https://vgy.me/TpG24N.jpg");
    text-align: center;
    height: 100%;

}

Upvotes: 1

Related Questions