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

Home Forums CSS 100% background img makes boxes static, unresizable

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #168250

    I tried a technique discussed by in-house Chris for a perfect 100% background that preserves the aspect ratio and it works perfectly…but! Since I added this piece of code it doesn’t let the other main divs resize, they just become “static”.

    Here is the pen with the new bg technique:

    If I remove the <div class="background"><img src=""></div>
    and put the background img in:
    .content-wrap {
    background: url(../images/bokeh-1280-dark.jpg) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    Then everything resizes perfectly…but I am stuck with my old issue of the background image. So my goal is to use the new clever technique while being able to properly resize my other elements.

    Thanks in advance!


    Ok it’s an issue with FF because if I look in Chrome the 3 right side divs (images) and the left side (text) resize properly.

    Same thing for this page that uses another background technique:

    If you have a look at my pen and this page you will see what I mean, the images shrink nicely and they don’t overlap the text.


    And if you remove the float on the .side div in the sidebar?

    .side {
        /* float: right; */
        display: block;
        margin-bottom: 1.5em;

    Maybe also clear the floats:

    .col {
      /* float: left; */
      /* width: 100%; */
      overflow: auto;
      margin: 3% auto;

    BTW list-items in nav still needs ul (or ol) parent (to be valid)


    @Atelierbram thank you so much!! Removing the float to the side made it 100% responsive! Now I even have my sticky footer, 100% background image that scales nicely with proper aspect ratio! Beautiful! :)

    As for the nav needing an ul I read it was not the case in a validator?!


    Just rephrased that: if you are using li list-items, then yes, the parent should be either ul or ol

    Question: Why do you need – or want to wrap floats within floats?
    (hence my float clearing remark).


    Ok thanks for the li clarification.
    I am still a css grunt, I am learning quick though.
    I just started to remove display:block when it’s a floating element. :)

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