Hi I have been trying to trying to hide a portion of image for my blog. Basically what I would like to do is to have images of different sizes (or same width but different heights) on my blog's single post page. But on the main page of the it should show only a portion of it, the size of the visible image should be same for all the images.
I hope the above is clear, just in case I the above explanation is not clear here is a site that works on similar way http://www.creativeapplications.net/
Now I could not get if it's done using CSS or some sort of Javascript.
Could you guys help me to understand it and achieve similar image effect.
Thank you
Takias
You want CSS' clip property: http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html
Related
Basically, I want to display a screenshot of a website inside an iphone frame. And I also want this to be responsive.
I have a rough idea but wouldn't know the best way of positioning the image, I'd probably be using the 'overflow-y' css property and set it to scroll, and set the height, so that my long image will scroll inside the iphone frame, however my problem is getting the image to be the right size of the iphone. Is this some javascript witchcraft I'm yet to discover? thanks!
P.S. Don't say that 'this has been asked before and link this because none of the examples actually work so I can't understand it, and don't know if they're trying to achieve the same thing.
Would leave this as a comment, but not enough rep.
You should probably just try it out for yourself and then post your code if you're having any issues.
If you really have nowhere to start go to codepen and search for 'iphone'.
I am facing a problem in css alignment.
The problem is, i have a single image which is like collage with multiple images in it.
I want to postion on particular image in that collage using css.
I need to set that in my div background.
I checked in internet, i am unable to find a proper solution.
Thanks,
Karthikeyan J
If you download a chrome addon called "SelectorGadget" you may be able to get the exact CSS selector for what you are trying to edit. Then just apply styling to this element. If you post your code, might be able to help more though.
I need a full-width image with labeled sections to link to individual pages. Any suggestions how to make this happen? The web site is built on WordPress, so if a plug-in will accomplish this that will work too. Method needs to be responsive and not break apart as viewport is reduced.
For example, Section 1 needs to link to the Section 1 page, etc.
See image at
Well, if you want to have something like that and responsive, you should cut the image in as many pieces as items you need, create an element for each piece and set the image as background. There rest is mediaqueries, maybe you can do it with bootstrap.
Also, try to go to the design community, as this is more related to design than anything else, and I don't think a Wordpress plugin exists for this.
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
I have received a table-html designed site to complete it. Now I have encountered a problem and need your help. Would it be possible for you to see why the top right image is not displayed completely? I have tried a a lot and found nothing.
Here is the link to homepage:
http://myperfume.ir/
Here is the link to full image so that you can see how much it is clipped:
http://8pic.ir/images/03017006756162873819.jpg
Thanks
The image that is being used as the row's background is this:
http://myperfume.ir/images/2_02.png
Which is already clipped, so you'll need to change it.
Your best bet would be to recode the entire website without using tables. You are going to have all kinds of headaches with this structure.