WordPress.org

Ready to get started?Download WordPress

Forums

Background image only appearing when text is placed over top (8 posts)

  1. J Howard
    Member
    Posted 1 year 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!

  2. LastForOne
    Member
    Posted 1 year ago #

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

    Peace,
    LastForOne

  3. Konstantinos Kouratoras
    Member
    Posted 1 year ago #

    You have to set min-height of this div.

  4. J Howard
    Member
    Posted 1 year 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.

  5. Konstantinos Kouratoras
    Member
    Posted 1 year ago #

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

  6. LastForOne
    Member
    Posted 1 year 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

  7. J Howard
    Member
    Posted 1 year 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.

  8. LastForOne
    Member
    Posted 1 year 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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.