Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #238596
    delta
    Participant

    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?

    #238597
    Shikkediel
    Participant

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

    Link

    #238605
    Paulie_D
    Moderator

    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.

    #238620
    Shikkediel
    Participant

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.