Announcement

Collapse
No announcement yet.

How to stretch a single image bg?

Collapse
X
Collapse
 
  • Page of 2
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
    #1

    How to stretch a single image bg?

    Hi,

    I've searched everywhere, here, W3C etc and worked out how to put an image background in V10 Silver Theme, but I can't seem to work out what I need to put in the css to make one image stretch with the whole site. I can get it to repeat, but this is only good for patterns. I can get it on it's own in any position. I have tried to enlarge the image itself, but that's not helped.

    Maybe it can't be done in Actinic? Or are there only specific image types that can be used like this and I'm using the wrong type?

    I want to be able to change these themes per season and any help would be greatly appreciated as ever as this one is doing my head in!!
    Helen
    www.postapresent.co.uk
    Gifts by Post & Giftwrapping Service
    Tags: None
    #2
    There are a few ways you can do this :

    1. create a bigger image to fit all screen resolutions - not good as people will view on tablets to 60" plasma TV's

    2. make the image tileable so it repeats

    3. use javascript to resize the image

    4. place the image into a wrapping <div> and absolute place the rest of the content over the top.

    The tiled image is best as it will not distort the image as the screen size changes dimensions. You can not control the size of the users monitors so you beautiful background image could become a mess of pixels.

    Most large backgrounds tend to cover up to say 2000 pixels wide and then cleverly use background colours, transparencies or repeats to take care of the larger displays.


    Bikster
    SellerDeck Designs and Responsive Themes

    Comment

      #3
      Thanks I will investigate those options. That's probably why most people go for plain colour or textures instead of images.
      Helen
      www.postapresent.co.uk
      Gifts by Post & Giftwrapping Service

      Comment

        #4
        Load time to get a decent enough image is a usual factor more than anything. It's why you see a real image often blending into a plain colour on the background, you then colour and bg image the background and the image seemingly blends into the BG color. It's a happy medium, vast screen sizes cause the issue, because they require an image larger than is sensible to ask someone to download. Stretching = skewing = don't do with images, very rare you can skew an image well, just doesn't work.

        Comment

          #5
          Ok I think I've sorted something, but how do I stop the bg image showing in the receipt page & pop up terms & conditions page in checkout?

          The inner layout on the rest of the site is white background and fine as the BG image goes behind it, but on these 2 pages it seems to be transparent and show through (V10). Support have told me that's how it is and can't be changed, but I'm not sure I believe that
          Helen
          www.postapresent.co.uk
          Gifts by Post & Giftwrapping Service

          Comment

            #6
            Probably just need to apply the white background to the containers for those 2 areas in the way your main template does that, so it overlays the white over the BG image like you say. Support have not told you the truth there i'm afraid, the receipt page for example is a table, so a background of white applied to that, would sort that one out quickly.

            Comment

              #7
              If you have added the image to the body class in the stylesheet then you can add bgimage="n" to the <body> html to over ride the specificity in the stylesheet.

              Don't always believe what support tell you


              Bikster
              SellerDeck Designs and Responsive Themes

              Comment

                #8
                Thanks guys. I've got the white background now on the receipt page & Ts & C's pop up in the main area and the bg image shows behind it on the rest of the page and this looks okay, but on the extended info page it doesn't. I can't see anywhere in the code for that where I can change it and have tried various options.

                I have also tried Jont's suggestion and put the image in the stylesheet:-

                background-image: url('Pink-Bow-BG2.jpg');

                and tried to put bgimage="n" in various places in the body html but no joy. What is the full code to go with this (maybe I'm coding it wrong) or should it go inside some other code on the page?

                You can see what I mean on extended info page here http://trials.actinic.com/trials/tri...er-basket.html

                PS No I don't believe everything support tell me which is why I'm grateful for you guys who give so much!

                Thanks
                Helen
                www.postapresent.co.uk
                Gifts by Post & Giftwrapping Service

                Comment

                  #9
                  On my own receipt page just before the closing </head> I use

                  HTML Code:
                  <style type="text/css">
body {
background: #fff url('shim.gif');
}
</style>
                  the shim.gif is the existing Actinic image and will already be preloaded. Dirty but it works


                  Bikster
                  SellerDeck Designs and Responsive Themes

                  Comment

                    #10
                    Thanks very much Jont that worked. I don't mind playing dirty!!
                    Helen
                    www.postapresent.co.uk
                    Gifts by Post & Giftwrapping Service

                    Comment

                      #11
                      Originally posted by jont View Post
                      There are a few ways you can do this :

                      1. create a bigger image to fit all screen resolutions - not good as people will view on tablets to 60" plasma TV's

                      2. make the image tileable so it repeats

                      3. use javascript to resize the image

                      4. place the image into a wrapping <div> and absolute place the rest of the content over the top.

                      The tiled image is best as it will not distort the image as the screen size changes dimensions. You can not control the size of the users monitors so you beautiful background image could become a mess of pixels.

                      Most large backgrounds tend to cover up to say 2000 pixels wide and then cleverly use background colours, transparencies or repeats to take care of the larger displays.
                      Are there any guides on here for option 2? I want to just create a simple background image, maybe just opaque diaganol lines or something simple to jazz it up.

                      Comment

                        #12
                        If you want something simple then you may be able to use somethng from here: http://www.grsites.com/archive/textures/

                        Comment

                          #13
                          Originally posted by Duncan Rounding View Post
                          If you want something simple then you may be able to use somethng from here: http://www.grsites.com/archive/textures/
                          The texture itselfs isnt a problem, as im a dab hand in photoshop ; )

                          Its actually planting it in to my layout... CSS is a whole new thing to me!

                          Would you recommend the tile being 250 x 250 for example then? I will use lines just like on this forum

                          <-------------------------------------------------------------------------->

                          Comment

                            #14
                            Attached is the Tile i made...

                            EDIT: All done. Check out the results using the link below and some thoughts would be nice.
                            Attached Files

                            Comment

                              #15
                              Well I think you could be a bit more creative with your photoshop skills and felt the background for them...



                              Nice job BTW!
                              Attached Files

                              Comment

                              Previous 1 2 template Next
                              Working...
                              X