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!
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!
A repeating background?
I'm guessing because I'm not sure exactly what you're going for.
If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.
If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.
My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)
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
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.
If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.
If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.
My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)
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?
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.
If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.
If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.
My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)
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?
Last edited by noodles415; May 11th, 2015 at 12:40 PM.
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.
And your CSS would look something like this:Code:<div id="background-1000-1240"></div>
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.Code: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 */ }
I haven't tested this approach, though, so I don't know how well it will work.
If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.
If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.
My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)
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...
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.
![]()
Last edited by noodles415; May 15th, 2015 at 11:02 AM.