100% background img makes boxes static, unresizable - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
April 17, 2014 at 1:49 pm #168250

GroovyMotion
Participant

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: http://codepen.io/GroovyMotion/full/ojbvu

If I remove the <div class="background"><img src="http://groovymotion.com/images/bokeh-1920.jpg"></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!

April 18, 2014 at 7:20 am #168269

GroovyMotion
Participant

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:
http://groovymotion.com/services4.html

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.

April 18, 2014 at 7:43 am #168270
Atelierbram
Participant
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)
April 18, 2014 at 7:49 am #168271

GroovyMotion
Participant

@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?!

April 18, 2014 at 7:50 am #168272

Atelierbram
Participant

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).

April 18, 2014 at 8:15 am #168273

GroovyMotion
Participant

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. :)
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘CSS’ is closed to new topics and replies.