<div> background image

py2006

Hiya,

Is there a way of adjusting the size of background-image of a div in css? I know you can adjust the size of an image if it is inserted directly onto the page via the <img> tag.

Also, is there a way the <div> can automatically adjust its size to that of the background image. I find that if the background image is slightly larger I have to manually adjust it in Dreamweaver.

Thanks

Liam Byrne

py2006 wrote: »

Hiya,

Is there a way of adjusting the size of background-image of a div in css? I know you can adjust the size of an image if it is inserted directly onto the page via the <img> tag.

Also, is there a way the <div> can automatically adjust its size to that of the background image. I find that if the background image is slightly larger I have to manually adjust it in Dreamweaver.

Thanks

No to both.

There are workarounds, such as having the image in its own div, positioned absolutely, with a z-index of -1, but unfortunately there's no way to do it directly.

Giblet

In newer browsers.
background-size: cover;

Liam Byrne

Giblet wrote: »

In newer browsers.
background-size: cover;

Far too limited in support just yet :

The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.

Giblet

Hence "In newer browsers".

S.M.B.

Agree with going down the CSS3 route, just provide a fall back for what's basically IE6-8.

Placebo

i would not use css3 or html 5 for anything yet,
having roll backs is extra work ! even ie8 is not full supported.

http://findmebyip.com/litmus/

S.M.B.

Well for some UI elements I'd find it's the opposite.

Styling particular elements with a selection of CSS3 rules and a perfectly acceptable fall back can be a lot less time consuming than creating an element with a 9 slice scaling technique.

I've used plenty of CSS3 over the past 12 months and aim to use a whole lot more over the next 12.

Giblet

Placebo wrote: »

i would not use css3 or html 5 for anything yet,
having roll backs is extra work ! even ie8 is not full supported.

http://findmebyip.com/litmus/

I disagree, just make sure you client knows there are concessions to be made for older browsers. I've never had a problem.

py2006

Thanks guys, it was more out of curiousity than necessity.

Pixelcraft

Placebo wrote: »

i would not use css3 or html 5 for anything yet,
having roll backs is extra work ! even ie8 is not full supported.

http://findmebyip.com/litmus/

When would you use it? That's a ridiculous comment

Placebo

Whats ridiculous is the assumption that all your viewers will be on modern browsers. I often use shadow/radius and gradients with the use of http://css3pie.com/ as an extra support mechanism for the IE suite but thats as far as it goes. Majority of the css3 selectors behave oddly on IE even when using something like css3pie.

So you can let your client know but when 40% of your users are on IE 8 or less* then you're only fooling yourself.

*Google analytics provided STAT for a campaign we did for Irish Times, which is still running.

and obviously i would like to use it when everything is fully compliant, have a look at the link i posted, all the way through. Id love to use 'nth-last-child' , it would be such a delight but when i have to add in a 'last' class anyway to support i.e, why am i doing two things !?

Pixelcraft

Placebo wrote: »

Whats ridiculous is the assumption that all your viewers will be on modern browsers.

I agree, where did I assume that?

Placebo wrote: »

I often use shadow/radius and gradients with the use of http://css3pie.com/ as an extra support mechanism for the IE suite but thats as far as it goes. Majority of the css3 selectors behave oddly on IE even when using something like css3pie.

So don't use css3pie. Let the site not have rounded corners in old versions of IE. Are you familiar with progressive enhancement? IMO you're doing it backwards, you'll never have a site utilizing new techniques if you want everything to look the same down to ie6.

Placebo wrote: »

So you can let your client know but when 40% of your users are on IE 8 or less* then you're only fooling yourself.

Don't understand your point. It doesn't matter if someone uses ie6 or ie10 they will get an appropriate experience to their browser.

Placebo wrote: »

and obviously i would like to use it when everything is fully compliant, have a look at the link i posted, all the way through. Id love to use 'nth-last-child' , it would be such a delight but when i have to add in a 'last' class anyway to support i.e, why am i doing two things !?

Good luck waiting! As it's an open spec being added to all the time, you're looking at 20+ years for that to happen. Rethink the way you're doing things, check out modernizr, if you want a book to go along with it check out Hardboiled web design, you're doing yourself no favors with your current approach.

Giblet

I've built websites that range from full CSS3 media powerhouses using the latest and greatest of pretty much everything (Touchscreen shopping with canvas drag and drop for kiosks used in boutique stores), that scale back to working with screenreaders, keyboard navigation and WAP browsers. The most important thing you have to learn is that you CANNOT support every feature, so don't even try. You shouldn't be building websites that hinge on any one feature anyway!

Progressive enhancement is right. IE6 is rubbish at javascript, so we don't have it enabled for any browsing in IE6, just reverts to simple gets using the query string.

You'll get clients who want it to look the same across all browsers, because their in-house PCs are all locked down to WinXP + IE6 or some ****, but they're not going to come up with crazy designs anyway, and if they do, if you can't explain why something won't work, you shouldn't be in the business of selling websites. Clients tend to end up using the backend CMS tools more than their own websites anyway...