How do I resize images that are used as div backgrounds?

[delta]

I dont like working with img tags so instead im using div tags and creating style background-image attributes, so instead of :

[img src=”example.png” /]

My images look like this

[div style=”background-image:url(‘exaple.png’); width:250px; height:250px;”]

The problem is, the width and height attribute only apply to the div and the not image being used as the background for the div. how do i resize the image with css? I could resize the images in photoshop but id like to use the same file for multiple devices and have the code resize the image instead of have multiple image files for different devices with different screen sizes. How do i do this?

[Shikkediel]

The background-size property’s for that. Also worth having a look at the other background values – and how to write shorthand.

Link

[Paulie_D]

I dont like working with img tags so instead im using div tags and creating style background-image attributes instead.

Then you’re probably doing something wrong.

Unless these are for styling….these should be image tags..it sounds like they are content.

Creating empty divs to show content images is very poor practice….and screenreaders will choke on it.

[Shikkediel]

A disadvantage of background images is also that they are not included in the window onload event…

[Author]

Posts