Div background doesn't show

sharls · August 4th, 2013, 11:28 PM

Pretty common problem, judging from what i've been seeing so far. Most of the time it's url problem or backslashes etc. Not this time though...

My code

Code:

<div id="est"></div>

Code:

#est {
	margin-left:55px;
    margin-top:55px;
	background-image: url(http://blabla.com/wp-content/themes/blankslate.3.3/blankslate/images/est.jpg);
	background-repeat: no-repeat;
	}

I've been trying everything. Local url/full url, quotation marks (single and double), bacground-imgage:/background. No luck...
Thanks in advance!

GuinnessShawn · February 3rd, 2015, 03:34 PM

An <img> placed inside a container like your div has dimensions that will "stretch" that container around it by default. That's because the item is something that fits into that container.

Styling a background image falls outside of the document content and merely "paints" it into what you specify. If that div you want a background on has no content in it and has no defined area then nothing will show. Set your #est div width and height or place content into it to "stretch it" and you will see your background displays as you intend.

e.g.
#est {
margin-left:55px;
margin-top:55px;
width: 300px;
height:100px;
background-image: url(http://blabla.com/wp-content/themes/...ages/est.jpg);
background-repeat: no-repeat;
}

pavithraramesh · February 1st, 2018, 06:52 AM

Hi,

If you don't have any content inside the div, the background image won't be displayed. Try adding a small paragraph inside the div and test if it works. I know you don't need content there. But please try this and tell if it works.

If it works, I will tell you a workaround for this issue.

Regards,

Pavithra
Spidergems