Using different images as border on each side using CSS but RESPONSIVE

[noodles415]

Hi, I am developing the overhaul of an old website. We are making the new site responsive but we have a textured border image on the top, bottom, left, and right of the site.
What is the best way to achieve this?
Thanks!

[TheGAME1264]

A repeating background?

I'm guessing because I'm not sure exactly what you're going for.

[noodles415]

original site can be found just google "dr sonnee weedn" client wants it to be pretty much the same just replacing flash with more modern stuff and making it responsive. here's what i have so far:
Dr. Sonnee Weedn

as you can see the responsiveness works but you see my problem?
right now i have a top div that's empty with a backgroudn for the top, same thing for the bottom, and then a repeating background for the main content div

thank you in advance for any suggestion

[TheGAME1264]

You've got a messy layout to work with. Your big problem is that fuzzy background border deal. That's not on you, though...that's on whoever designed it. It's going to cause you headaches no matter what you do.

What I would suggest you do is come up with a different background images for each of the sections and each of the widths you want to cover and use media queries to pull the appropriate backgrounds. Take a cell phone for example. You may want a 300-pixel wide layout, so your header background would be 300 pixels wide, your body would be 300 pixels wide, and your footer would be 300 pixels wide. Repeat for each width/size you want to cover.

[noodles415]

Good suggestion, going to be a pain but it'll work... what do you suggest I make my break points? 960px, 860px, 760px, 660px, 560px, 460px, 360px, 260px?

[TheGAME1264]

I'd suggest your common break points - 20 pixels for the ones that aren't already there. You've got what looks to be 960. So add 748, 460, and 300.

[noodles415]

So far I've done this.

Dr. Sonnee Weedn - Traditional Wisdom, Transformational Psychology

Please try the responsive aspect of it and let me know if you think it works well.

Thank you.

PS: right now on the first page load (no cached images) when resizing it takes time to load the images. Is there a good way to "pre load them" or should I make a div with 0px size with the background images so that they are cached for window resizing?

[TheGAME1264]

Seems to work okay on this end.

If you want a "hack" preload, what you could do is create divs for each of the smaller resolutions immediately before the </body> tag and set them to display: none;. Then, on each of the larger resolutions, include a smaller resolution background for each div.

For example, one of your breakpoints is 1000-1240 pixels, so you might create a div like this.

<div id="background-1000-1240"></div>

And your CSS would look something like this:

div#background-1000-1240 {display: none;}
@media all and (min-width: 1241px) {
background-image: url('img/topbg-960.png'), url('img/bottombg-960.png'), url('img/texturedbg-960.png'); /* load your three background images here */
}

This way, the 960-pixel background images will only load for the larger resolution. There's no point in loading them for the smaller resolutions since no one will resize their screen that large. As a result, those backgrounds won't download.

I haven't tested this approach, though, so I don't know how well it will work.

[noodles415]

Thanks... I will try to come up with a solution like that. Now I just need to find out how to make vertical nav responsive...

[noodles415]

ok... dumb question... how do I change the width at which the default navbar switches from "standard" view to "mobile" view with the hamburger menu and dropdowns... thanks!

PS: Also need to change at which width it "stacks" the divs... I don't want to stack it UNTIL it switches from standard view to mobile view, if you understand what I mean.