background disappearing after adding background-image:no-repeat;

Question

I am trying to set a background image for my wordpress website.

.content:before {
content: "";
background-image: url("gfx/SevenWonders.jpg");
/*background: #fff;*/
background-size:600px 700px;
background-repeat: no-repeat;
position: absolute;
z-index: -9999;
top: 0;
right: 28.5%;
bottom: 0;
left: -10000px;
}

this is my css code with background-image. I resized the size because the image

is pretty large for my website. AND! after adding background-repeat: no-repeat,

the background is not displayable. I see only white background.

Of course, I googled to find the solutions, but almost all of them are saying

about syntax error, but I cannot find any syntax mistakes in my code ..

Answer 1

check this fiddle. Problem is with your left property value in css.

.content:before {
content: "";
background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150");
/*background: #fff;*/
background-size:600px 700px;
background-repeat: no-repeat;
position: absolute;
z-index: -9999;
top: 0;
right: 28.5%;
bottom: 0;
left: 0px;
}