Skip to main content

Forums

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

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

    Hello guys, I’m making a responsive website and i have a problem with a background image. Even putting height 100% nothing appears. When I set min-height: 800px, then the image appears but is distorted. Could someone help me please?

    I posted the code here: https://jsfiddle.net/85dsg4mn/

    Thanks
    Flp

    #296356
    ruzip
    Participant

    You should define the height and width then use background-size: cover or contain;


    .image {
    width: 300px;
    height: 200px;
    background-size: cover;
    }

    Here is the updated fiddle:
    https://jsfiddle.net/gp1xuL85/

    #296357
    flpevt
    Participant

    Hello, thanks by reply. I put width, height and background-size:cover, but the problem continues… I put all code here: https://jsfiddle.net/2q860hub/

    Tks

    #296359
    vulkanus
    Participant

    Hi,

    Maybe this?

    body .slide > div .img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: no-repeat center center;
    /* background-size: cover; */
    margin-bottom: 20px;
    }

    or play with:
    https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-size

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