Forums

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

Home › Forums › CSS › 2 textured backgrounds

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 31, 2014 at 11:45 pm #171510
    genkidave
    Participant

    I’m trying to find a simple way to use 2 textured background images for my pages.

    Top – Black Textured Background (png)
    Bottom – White Textured Background (png)

    What I don’t know is, what size they should be to stretch the full width of the viewer’s monitor, regardless of size and/or browser.

    I can’t use squares/rectangles due to the fact that both textures have unique patterns that would make them look VERY FAKE if i did, which would defeat the purpose of the visual effect of the pages to begin with…

    The best example would be thus; the top would be a karate black belt and the bottom would be a white karate gi (uniform), both taking up 50% of the top/bottom respectively.

    How long and wide would both have to be to not only be non-browser image heavy (did I just say that…?), in order for anyone to view it as such regardless of monitor size or browser?

    I’ve seen SO MANY tutorials for CSS3, that it literally crossed my eyes, (and almost made me forget my own name…). There are simply (for lack of a better word), too many!

    Can someone please help me, so my current “self” won’t be in danger of losing itself and drooling on my keyboard…?

    GD

    June 1, 2014 at 12:38 am #171513
    Atelierbram
    Participant

    How long and wide would both have to be

    What you could try out is using SVG images instead of PNG. Find out which dimensions (4:3 for example) work out best, and have it auto-scaling with backgroud-size property + value, and position it: could have one on the HTML , and the other on the body-element (as background-image). Would like to see an example of this in order to help further. An additional way to avoid having very large image sizes, is to seperate the pattern in a, so called, ’tiling’ background-image. Can you maybe upload the images that you want to use somewhere, so we can get a better idea what is needed here?

    June 2, 2014 at 7:30 am #171585
    genkidave
    Participant

    I’d love to show you the images, but not sure where I can put them for you to see. The website’s owner doesn’t want anyone to access his server.

    Any suggestions?

    GD

    June 2, 2014 at 7:42 am #171588
    Paulie_D
    Member

    Why not use a free image hosting service like Photobucket.com

    I use it all the time.

    June 2, 2014 at 4:56 pm #171603
    genkidave
    Participant

    Thanks M8!

    Here’s the link to the 2 raw unedited image.

    http://s1268.photobucket.com/user/Dave_Andrews/embed/slideshow/

    I need the blackbelt 100% width and 50% hight for the TOP
    and
    the karate gi fabric/texture 100% width and 50% hight for the BOTTOM.

    Thanks BTW for the replies and help M8! I’m seriously Gg8ful!

    GD

    June 3, 2014 at 2:00 am #171622
    Paulie_D
    Member

    Could you provide actual links to the imaged…not the slideshow?

    It would be easy enough to make an example if we had access to those.

    EDIT: Never mind

    Black
    http://i1268.photobucket.com/albums/jj575/Dave_Andrews/shodanfw_zps70fb4959.png

    White
    http://i1268.photobucket.com/albums/jj575/Dave_Andrews/GiTexture_zps61732221.png

    June 3, 2014 at 2:17 am #171624
    Paulie_D
    Member

    How long and wide would both have to be to not only be non-browser image heavy (did I just say that…?), in order for anyone to view it as such regardless of monitor size or browser?

    How long is a piece of string.

    Neither, as far as I can tell, of these are repeating images, so that’s the problem.

    The white image is only 600×800 and it would probably need to be at least 4 time larger 2400×3200 for the top-line monitors these days…and even then it might not be enough depending on the actual device (TV?).

    What you might try to find is a repeating image with same ‘texture’…SubtlePatterns.com might be good starting point.

    :http://subtlepatterns.com/?s=cloth

    June 3, 2014 at 3:38 am #171629
    Atelierbram
    Participant

    This is one way of getting the positioning done in CSS:

    http://codepen.io/atelierbram/pen/xizmv

    Note that doing it like this will have a nice effect when there is not much content on the page (no vertical scroll-bar), if there is, you maybe want to explore a different method, like using the viewport unit vh(which has not as much browser-support).

    A possible workflow:

    Let’s say you found a light background-pattern that you like, but now you want this same pattern, only in a dark version.

    1. Download the image you like to your computer
    2. Convert the image to SVG (can also be done with the help of a web-based tool like bitmap to vector on drububu.com
    3. Open this image in your favorite vector editing software.
    4. Make a copy, and rename it to something like pattern_dark.svg
    5. This is the most work: changing all of the colors to a darker equivalent, (direct selection tool/select/same fill color), use some color-picker like hslpicker
    6. When done, save the SVG as PNG
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.