Background image only appearing when text is placed over top

J Howard
(@j-howard)

11 years, 3 months ago

Hi there. I’m currently editing one of the DIV’s on my homepage. A background image for the DIV has been set, but it just doesn’t show – unless text is added within the DIV, and then the text is shown on top of the background image. If I add one line of text, one ‘line’ of the image appears (think when a homepage loads for the first time, refresh style). If I add two lines of text, a little more of the image appears. What’s going on? Help!

Viewing 7 replies - 1 through 7 (of 7 total)

LastForOne
(@jarral)

11 years, 3 months ago

you need to set the height of the div for it to display.

Peace,
LastForOne

Konstantinos Kouratoras
(@kouratoras)

11 years, 3 months ago

You have to set min-height of this div.

Thread Starter J Howard
(@j-howard)

11 years, 3 months ago

Thank you both. This has worked brilliantly. Although, having just set the background-repeat to no-repeat, I now have loads of extra space underneath the image, before reaching the footer at the bottom. What can I define within the CSS properties of the DIV, so that it auto adjusts for the height of the image? Sorry to be a pain, this is all quite new for me.

Konstantinos Kouratoras
(@kouratoras)

11 years, 3 months ago

Try setting the property overflow:hidden in the parent div.

LastForOne
(@jarral)

11 years, 3 months ago

if you just want to display the text on image you should define the height of div same as the height of background image and it wouldn’t be a bad idea to share the link so we can see and get a better understanding of what you’re trying to say..

Peace,
LastForOne

Thread Starter J Howard
(@j-howard)

11 years, 2 months ago

Here is a link to a image, which shows the current problem.

http://www.thedash.org.uk/wp-content/uploads/2013/01/Gap.jpg

Here are the details of the DIV the image sits in.

#explore {
background-image: url(http://www.thedash.org.uk/websitetest/wp-content/images/exploresite2012.jpg);
color: #ffffff;
height: 621px;
background-repeat: no-repeat;
overflow: hidden;
}

The image should meet up with the footer, as opposed to the horrendous gap below.

LastForOne
(@jarral)

11 years, 2 months ago

is the image big enough to cover the whole content area? for testing purpose set the height to 100% and test it.

Peace,
LastForOne

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Background image only appearing when text is placed over top’ is closed to new replies.

Background image only appearing when text is placed over top

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics