SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Large background image overlay

    Hi All,

    I am using a jquery plugin for a large website background image and am wondering how one can overlay another image like a pattern over this one??
    I created a background image with the pattern already added in photoshop, but when the site is viewed on a tablet or mobile the pattern becomes too large, but I think if I use the pattern as an overlay using CSS this problem might be fixed....


    Any ideas?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    If you are talking about scaling the background image then the css3 property background-size should do what you want as it will scale backgrounds to match the content -if that's what you wanted. It's supported on the iphone but other mobile support may be patchy.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    If you are talking about scaling the background image then the css3 property background-size should do what you want as it will scale backgrounds to match the content -if that's what you wanted. It's supported on the iphone but other mobile support may be patchy.
    Hi Paul,

    No, I have no issues with scaling the images, the jquery plugin does a good job. I just want to have an overlay of a grid pattern over the background image and struggle to achieve that.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by milkandhoney View Post
    I just want to have an overlay of a grid pattern over the background image and struggle to achieve that.
    You could try having a full width div around your content with that pattern as a background image.

  5. #5
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could try having a full width div around your content with that pattern as a background image.
    Hi ralph.m

    That could work.
    So would I just create a div that is 100% wide and high and wrap all of the page elements, including the current page wrapper, into this one?

  6. #6
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could try having a full width div around your content with that pattern as a background image.
    Hi ralph.m

    It didn't work....

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I think we'd need to see what you are working with so that we can test things out. Do you have a link to the site in question?

    It's hard to visualise exactly what you need and of course will depend on your structure. If you need a background on top of an existing background image then you can't apply it by a div that is outside. You would need to have a nested element with the new background in place so that it would sit on top.

    Perhaps another solution is the absolute overlay technique. You set position:relative on the parent of the element holding your image and then you create an absolute overlay to which you apply your new background image. Using co-ordinates of top, right, left and bottom will ensure the absolute element stays track with the static element but of course you will need to control stacking levels if other content is in the mix. (The middle section of this page uses the absolute overlay technique to create a section that stretches from a point below the header to a point above the footer (and can't be done any other way). Although the application is different to your requirements the technique is the same.)

    It may be easier if we see what you have already before suggesting complicated fixes as they may not be appropriate and something simpler used instead.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I think we'd need to see what you are working with so that we can test things out. Do you have a link to the site in question?

    It's hard to visualise exactly what you need and of course will depend on your structure. If you need a background on top of an existing background image then you can't apply it by a div that is outside. You would need to have a nested element with the new background in place so that it would sit on top.

    Perhaps another solution is the absolute overlay technique. You set position:relative on the parent of the element holding your image and then you create an absolute overlay to which you apply your new background image. Using co-ordinates of top, right, left and bottom will ensure the absolute element stays track with the static element but of course you will need to control stacking levels if other content is in the mix. (The middle section of this page uses the absolute overlay technique to create a section that stretches from a point below the header to a point above the footer (and can't be done any other way). Although the application is different to your requirements the technique is the same.)

    It may be easier if we see what you have already before suggesting complicated fixes as they may not be appropriate and something simpler used instead.

    No, I don't have a link to the site, it is not live.
    The jquery plugin that I am working with is called bgstretcher

    The effect that I want is located here Vegas Slideshow. As you can see, the background images or rather slides have a pattern overlay and I want that. I have tried to set up this particular background script but I am having issues getting in to work- the documentation isn't very novice friendly.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I think we'd need to see what you are working with so that we can test things out. Do you have a link to the site in question?

    It's hard to visualise exactly what you need and of course will depend on your structure. If you need a background on top of an existing background image then you can't apply it by a div that is outside. You would need to have a nested element with the new background in place so that it would sit on top.

    Perhaps another solution is the absolute overlay technique. You set position:relative on the parent of the element holding your image and then you create an absolute overlay to which you apply your new background image. Using co-ordinates of top, right, left and bottom will ensure the absolute element stays track with the static element but of course you will need to control stacking levels if other content is in the mix. (The middle section of this page uses the absolute overlay technique to create a section that stretches from a point below the header to a point above the footer (and can't be done any other way). Although the application is different to your requirements the technique is the same.)

    It may be easier if we see what you have already before suggesting complicated fixes as they may not be appropriate and something simpler used instead.

    I've had a go at the absolute overlay technique and it is not quite working. Could very well be the fact that I am a novice....
    What I did;

    I created a new div that is 100% wide and high with relative positioning.
    The pattern overlay was applied to the pagewrapper div with absolute positioning, however the pattern overlay is only as wide as the wrapper which is 910px and I need it to cover the whole page to be 100%. When I change the width of the div as you can imagine, the whole layout goes bananas....

    Do I need to create another div between the overlay and the pagewrapper?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Excluding IE6 I think you could do something like this:

    Code:
    #fixed-overlay{
    	width:100%;
    	height:100%;
    	position:fixed;
    	z-index:2;
    	background:red;/* add your image here instead of red*/
    	opacity:0.5;/* remove this - just for testing red colour */
    }
    #page{position:relative;z-index:3;}
    Code:
    <body>
    
    <div id="fixed-overlay"></div>
    <div id="page" etc.............
    I just tried it on the downloaded bgstretcher demo and it seems to do what I think you want

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I ended up using another jquery background script that has an built-in overlay option.
    Thanks for your help with this, I will definitely try out what you have suggested and get back to you!


Bookmarks

Posting Permissions

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