Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Senior Member
    Join Date
    Nov 2013
    Posts
    146
    Member #
    37737
    Liked
    15 times

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

    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!

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    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)

  4. #3
    Senior Member
    Join Date
    Nov 2013
    Posts
    146
    Member #
    37737
    Liked
    15 times
    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

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    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)

  6. #5
    Senior Member
    Join Date
    Nov 2013
    Posts
    146
    Member #
    37737
    Liked
    15 times
    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?

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    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)

  8. #7
    Senior Member
    Join Date
    Nov 2013
    Posts
    146
    Member #
    37737
    Liked
    15 times
    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.

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    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.
    Code:
    <div id="background-1000-1240"></div>
    And your CSS would look something like this:
    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 */
    }
    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.
    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)

  10. #9
    Senior Member
    Join Date
    Nov 2013
    Posts
    146
    Member #
    37737
    Liked
    15 times
    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...

  11. #10
    Senior Member
    Join Date
    Nov 2013
    Posts
    146
    Member #
    37737
    Liked
    15 times
    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.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

different images of border design

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:33 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com