Jump to content

Static image with fluidity zoom across devices. Please help.


slowdrag
 Share

Recommended Posts

Hi,I don't know if this is possible, but, I am getting back into web design and don't know how to do this. What I am attempting is quite a simple idea, I have a background image I created in photoshop with its "flicks" & "flares" and what not. I have set it as a part of my banner_bg in my responsive CSS code, but, what is happening ( of course this would be the problem I face) is the background image is re-sizing to fit in the fluid design. What I want it to do is stay static, and simply Crop the areas outside of the devices boundaries. So that I dont loose the effectiveness of my logo and don't impede on the image's visibility. And no, before anyone asks, I do not want to have my logo separate as my design has taken several months to perfect and incorporate into, what I would call, "A Fluid Crop Design". Would have been good to see if I could get the code first though, haha.I hope this isn't too vague. I have seen it before but can't remember where. Does anyone have a code to help me, or, does anyone know what I'm actually talking about? Thanks in advance to anyone who posts.

Link to comment
Share on other sites

That is the thing, I don't have a code....but what I do have is the basic CSS fluid percentage codes, which are general.What I want to know is if my description of what I want it to do is possible? And if there is a code out there someone would be able to share with me?If my description is hard to understand, then please, let me know.Sorry about the fuss.

Link to comment
Share on other sites

The concept I am looking for is basically this.Open photoshop, paint or any image software, when you hit the rectangular select tool and drag it across the image, the image does not resize does it?So that is what I want to do with my banner/bg. It to stay static, but for when it gets the parameters of the viewing area changed, the image simply cuts of what is not inside those parameters from the right, without adding the bottom scroll bar.

Link to comment
Share on other sites

??? if you are using background image as

<div id="banner">   </div>

#banner{background: url(myimage.png) no-repeat center center;}

the BG image will remain static, not resize, and you will only see part of the that shows within the inner area of #banner element.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...