Jump to content

Static image with fluidity zoom across devices. Please help.


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...