Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Background Image with -Tag

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #204681
    berti
    Participant

    Hey guys,

    unfortunately my English is not that good, but I hope you can understand my problem. :)

    I tried to create a container with a background image. The image is not defined via background-image in css, but in a single div within the actual container. Like:

    <div class="wrapper">
        <div class="section">
            <div class="section__background-image"><img src="http://placehold.it/1140x760"></div>
            <div class="content"><p>Lorem ipsum dolor...</p></div>
        </div>
    </div>
    

    If the image is higher than the container (in this case .section__background-image>img is higher than .section) the section container should get the height of the image.
    I solved this problem by adding some css.

    <style type="text/css">
    .wrapper {
        background: #000;
        max-width: 1140px;
        margin: 100px auto;
    }
    
    .section {
        color: #fff;
        padding: 45px 30px;
        position: relative;
        z-index: 0;
    }
    
    .section__background-image {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        position: absolute;
        z-index: -1;
    }
    
    .section__background-image img {
        width: 100%;
        height: auto;
        display: block;
    }
    </style>
    

    Now the problem is, if the content is higher than the image it looks bad. I got a video to discribe my problem a little bit better.
    http://io.arobmedia.de/example.mov

    So is there a pure CSS way to solve this?

    Appreciate your help!!

    Have a nice day!

    Berti

    #204682
    Paulie_D
    Member

    By “looks bad” do you mean it distorts/overflows?

    That’s the problem with the technique you are using. That’s why we use background-image

    #204684
    berti
    Participant

    But using background-image means that I have to specify the height of div.section because I’d like to display the image in full-height (as long as the content is not higher as the image!).
    Doing this each time a container has an image isn’t my favorite way.

    #204687
    Paulie_D
    Member

    Well then you have a tricky problem.

    Setting the image div to position absolute takes it out of the document flow and so it’s height isn’t counted when the height of the parent is calculated.

    Looks like you will have to try another approach….perhaps javascript.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.