The Weekend Quick Tip: Flex Your Images
One glaring reason why many developers have chosen fixed-width over elastic sites is because using inline images can destroy the layout of a site – much like a stampede of cattle that repeatedly kick you in the groin. It just isn’t fun at all. Sure, you can specify their widths using percentages or ems, but those methods aren’t ideal. In such instances, why not try using the background technique?
Step 1: Set Up The HTML
First, let’s create a very simple html file.
<div id="container">
<div id="image">
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ullamcorper
magna quis velit. Nam vitae dui et massa convallis vulputate. Aliquam ante magna,
fermentum nec, scelerisque eget, semper quis, ipsum. Fusce consectetuer enim quis
lorem. Morbi elit turpis, consequat ac, lacinia nec, dignissim ac, velit. Proin
mauris orci, rutrum a, suscipit eu, sagittis et, nisi. Quisque at mi ac magna fermentum
elementum.
</p>
</div>
Step 2: Add The CSS
#container
{
width: 50%;
margin: auto;
padding: 1em;
background: #3d332a;
color: #b8ada2;
}
#image
{
height: 300px;
background: url(Girl.jpg) no-repeat center;
}
In order for our container div to be flexible, I’ve set the width to be 50% of the browser window. Next, I’ve set the margins to auto in order to center the contents. The padding, background, and color are simply aesthetic styling.
The div tag with an id of “image” is where we’ll add the background image. The key here is that I’m not setting a specific width to the image – only the height. When you add the image as a background, you’ll want to make sure that you “center” it (no-repeat center). This, in effect, will force the main focus of your image to be displayed at all times. *Note – Make sure that you use an image that has the main focal point in the middle.
You’re Done
View your work in a browser and try increasing and decreasing the browser window. There are a few things to keep in mind when using this method.
- Make sure that you use images that are as wide as they’ll ever need to be.
- The center of your image should be the focal point.
- Center the background image.
- Consider making the maximum width of your container div equal to the full width of the image.
- Additionally, consider adding a minimum width to make sure that your image doesn’t shrink too much.
Have a great weekend. Let’s meet back here Monday! By the way, be sure to follow us on TWITTER!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Breezi Comming Soon page - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
This weekend Quick Tip’s a neat idea! By the way, nice quick tip
.
Great tip! Good tutotial, keep them coming please.
I think this site needs more quick tips like this. It may not be super helpful to everyone but not everyone thinks of alternative methods of doing things.
Great Tip!
Never thought of using background to make it flex.
@Adam – I agree! This is something that I’m planning on doing every weekend. The way I see it, by Saturday, we all have “code overload syndrome”. It might be nice to have some quick tips that don’t fry your brain.
these sort of articles are worth much more than the long ones we get,
well done
I would use this technique only for layout images not for photos or graphics which are relevant to the content. It is not accessible. Without CSS you won’t see the image and without the alt-attribute the image would be invisible for a text reader.
At first I thought it was something about Adobe Flex.
Really nice really simple and really effective, thanks
Great post! thnx
If you want it to be accessible, just put a copy of the image inside of it and use “display: none;” in the stylesheet. That way when css is turned off, the photo will be viewable.
“much like a stampede of cattle that repeatedly kick you in the groin.”
Wow. That’s…..a pretty nice analogy actually.
I might have to try this out. I’ve been wanting to get into fluid layouts, but this was one thing that was messing me up [Images that just get in the way, and look terrible when the resolution is shrunk.]
Great tip! I have fixed-width-itis and will definitely try this. I agree with many of the above commenters – I tend to glaze over at the long tutorials, but I love quick tips like these. Thanks!
This is a great trick. And Daniel good call on the “display: none;” will try it out when I play around with this tip over the weekend
Neat idea. Of course this wouldn’t work with all photos, but useful for many.
It would be better with a constant amount of space on all sides of the photo. If your screen is big enough, there are huge ugly gaps.
“It may not be super helpful to everyone but not everyone thinks of alternative methods of doing things.”
i agree with Adam Jackett.
Very lovely tip
Great tips. more tutorial on mootools and wordpress please.
cool idea. maybe they’ll be adopted by the other ‘TUT sites.
Simple but very clean, I like it and also give us more tuts love this website.
The key here is to remember that this is simply another tool for your bag. It won’t be appropriate in all circumstances. However, in reference to the usability comments – I would agree that adding the image into the code and then setting the display to “none” would be a good way to go.
Another thing to consider is…what do you do when the images are being populated from a database? For this situation, it could be argued that inline styling is acceptable in such a case…as much as I hate to say it. That way, you can dynamically set the background in the code.
What do you all think?
This is great! thanks
@Jeffrey – as much as inline styling is frowned upon, there are times when it is more appropriate. As you say, it’d be better to set the images using inline styling, rather than have perhaps hundreds of unique IDs. Semantically, it’d be very difficult to give each a meaningful ID too, so inline styling in this case would be better I think.
I’ve never used this technique before, but have seen it mentioned in a web design book – can’t remember which one. Is it this one – http://www.transcendingcss.com/ ?
Thanks for posting.
[sorry for the repeat comment]
The technique works great for images that have their main interest in their centre (as you mention), but isn’t useful for other types of image (though perhaps you could fix this with CSS for images with left/right focal points).
@Jeffrey (perhaps the focal point of the image could be stored in the database and the CSS styling applied appropriately. Though that’s probably over the top.)
I don’t agree with this tip for several reasons:
1. You need inline styling to do this unless you are willing to edit a CSS file every time you post a new image.
2. It isn’t semantic at all. An image that is content and not a design element should not be a background. And now you have an empty div.
3. This is terrible SEO, which ties back to #2. Search engines will not spider the image.
I’ve seen this done with the max-width CSS property and some Javascript which may be a better solution.
for those who disagree… dont read the post. submit your own tutorial and lets see how good are you.
I commented soon after this article was published and it seems to have been deleted, even though I actually changed the CSS so it was both semantic and better for SEO.
My original comment below (see if we can actually get it published this time…):
With respect to the tutorial author, this teaches bad coding practices and has two major flaws:
* The blank DIV tag gives no information to visitors with images turned off, screen readers, etc. It’s a big accessibility issue.
* The image shown as a CSS background can’t have ALT tags, can’t be linked, etc. The lack of ALT tags is both an accessibility and SEO issue.
It’s very easy to accomplish the same thing with being a little more creative with your CSS:
http://brandoneley.com/imagedemo/demo.html
Using the CSS overflow property you can get effectively the same effect without compromising your accessibility or SEO.
It works in IE 6/7, Safari and Firefox.
I agree with you, your example is great, thanks.
Very sweet and simple idea, a best Web Standards Secret Modus Operandi
this technique is awesome
+++ Good, thanks many helpful
Brandon’s method in the comments is I think a more elegant solution.
However for those who want to go the background-image way and still provide alternative text content for screen readers and search engines you could place text in the div and set text-indent:-9999px in the CSS.
Wow, perfect solution!
????
Dude, have you ever heard of semantics?
I like this site, but I think you have to be more careful about what are you teaching…
@Martin – Yes, I have heard of semantics. This is simply an alternative approach if needed. And I should inform you that this method was originally created by Andy Clarke.
I’m working on a better AND semantic methos, 100% CSS. If i can make it work in all A-grade browsers, i will post it here.
@Jeffrey,
So what if Andy Clarke created it? It´s wrong anyway!
That “gurues have always the true word” is a conception that I dont really follow, they can know more and have more experience, but that isnt the same as having always the true.
And I dont discuss the method itself, I think it´s cool, but I also think you need to add the problems that it has with semantics, and why semantics are good, otherwise, let´s go back to tables and empty gifs!
Cheers.
demo does not validate
It’s ok tutorial trik html.
thank u
Great tip and great trick!
It inspired (as I can see by the comments) some people to come up with their own ideas and solutions for the same problem. I think that the original method is good for background images, but may not be the best solution for the in-page ones; for the latter, there are some neat methods in comments.
Tip’s interesting, out of box, it makes people think, and inspires; that’s the real value of it.
Thank you and keep up the good work/tips!
Yes, using max-width would allow you to keep the image in the page and keep the content and style separate.
just set
selector {
max-width: 50em;
}
or whatever you want the container size to be. I’m pretty sure this will center the image, but if it doesn’t just add some more properties.