I am trying to display a cropped center area of an image and have it work for different size images.
I had success setting a fixed width for the div containing the image and using overflow:hidden property, this works the way I'd like it to except this only shows the leftmost part of the image and the right side is hidden.
What I'd like is to display the center part of the image and have the left and right sides of the image hidden.
I'd go with the approach of making it a background image
.imghider {width:100px; background-image:url(./qed.jpg); background-position:center center;background-repeat:no-repeat;}
<div class="imghider"> </div>
As for different sizes you could use several classes or CSS expressions (or server side css generation)
I hope this helps.
Related
I have a background-image in a block as seen in the page link below.
I am trying to display the image as follows:
I want the image to consume more of the page background (irrespective of how much content is in the div block
I need the image to extend outside the boundaries of the block it is in
I want to the image to be responsive
It seems that my image grows and shrinks as I add more content or take content away. Is there anyway to get the image to appear larger than it is (ideally ~90% of viewport width) and retain its 90% size across various screen resolutions?
http://bit.ly/1IgmNKT
Thank you.
Try:
background-size: 100% auto;
I want to apply a background image to my web page so that it covers the whole page. But the image height is bigger than the page height and I want the bottom of the image to align with the bottom of the page. Is it possible? Here's the technique I'm using so far, which doesn't make this bottom alignment:
background-image:url(background.jpg);
background-repeat:no-repeat;
background-size:cover;
I tried to add center bottom after url() but it doesn't work.
I think you can use background-position to accomplish what you want.
How to use it: http://www.w3schools.com/cssref/pr_background-position.asp
I got a navigation menu as image. I made a nav div with the image as background and a fixed width and height. Now in the little boxes under the lines I want nav links. So what I did is I made multiple divs in the nav div and positioned them in the little boxes. So they are all positioned perfectly inside firefox but, unfortunately in other browsers like chrome they have different positions (nothing extreme, but they arent perfectly aligned in the little boxes).
What I thought was that whenever you have a certain fixed height and width of the container div. The margins of the child divs will be the same on all browsers and screen sizes as they will always be the same size. How is this possible and what would be the best options to make this nav menu possible?
Try use this http://www.image-maps.com/ ... image maping tool lets you to set link coordinates.
If you know where these boxes are located pixel-wise in the background image, you could absolute position the nav divs and get them precisely where you want using top and left based on pixels of the parent div (with the image) instead of using margins.
I'm trying to edit a tumblr theme to make my posts centered inside of an image (the image is in a div) I've tried giving the posts and div the same margin in CSS but I can't seem to get the image inside the div to center correctly on the page. I want the posts to be perfectly centered horizontally inside the image even when the browser window is resized. Anybody know how i can do this? Is there an easier way than having the image in a div? here is a link to my code
http://pastebin.com/x6MP6EYQ
First of all i would recommend using image as a background image. Would be easy to handle it as it will not affect other things inside a div.
Second, if you were to use image you would position it absolutely which mean main div should be positioned relatively. Then once image has been positioned i.e. top:0; left:0; put z-index:-100; so that way it will be always behind.
To make div always be centered both horizontally, vertically and in both directions. See my example. Here:
http://jsfiddle.net/techsin/TfLTR/
try style=aligen:center;
just you can manage by style sheet tag like padding and margin also .
My CSS knowledge is very limited, so I'm putting my problem here hoping for the best.
I'm using this box: http://www.456bereastreet.com/lab/flexible_custom_corners_borders/ in my website, and I need to display content in two columns format.
I've attempted with the simple table, and using divs with float set (needed clearfix so the parent got its height). My problem is a visual bug that appears of the left side.
Only happens with table and div floated. p, h1, etc works fine.
Here is a picture of the bug: http://img18.imageshack.us/img18/8783/imagem2hdp.png
Thanks
edit:
Here's the code: http://dl.getdropbox.com/u/178438/css_test.zip
You should set a background color for .content this will hide that part of the border image.
--edit below--
The extra whitespace between the gradient and the border looks like an element is being pushed sideways, when it's really all part of the left border background image which is the second main div.
div // Right border
div // Top border with corner sub divs
div // Left border
div // Content
div // Bottom border with corner sub divs
Since the content part of the box is inside the left border div and the border background image is done sprite style with multiple images put together in a larger image the only CSS only solution to this is to apply a background color to the content area to cover the left background image (like the Left background div is doing to the right background div)
There are other ways to fix this such as separating the images out into separate files or moving the Content div outside of the Left border div, but at that point you aren't really using that same box anymore.