1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Solution for background image when zooming out

Discussion in 'CSS' started by mehron, Apr 6, 2016.

  1. #1
    I've got a PSD template to convert it to HTML. How do I deal with the background food images (highlighted red on the image) when I zoom-out (ctrl--) the browser? The total width is 1300px, container is 1000px. What would be the best approach? Do I repeat them? How? What would you do? Thank you.

    [​IMG]
    SEMrush
     
    Last edited: Apr 6, 2016
    mehron, Apr 6, 2016 IP
    SEMrush
  2. Bitpalace

    Bitpalace Greenhorn

    Messages:
    53
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    13
    #2
    One possible solution is to make the images to the left and to the right larger than the visible page area and set the columns (or divs) that contain these images to an expandable value, e.g.
    left colum: 49%
    center colum: 2%
    right colum: 49%
    Then place something into the center colum that cannot become smaller than the minimum width of your site content, e.g. a div or a an img with a fixed with of 1000px. The left and right columns can then be filled with a background image that is much wider than the visible space, so that when the colums expand, more of their background image becomes visible.
    Here is sample website that is using this approach: http://pizza-recipe.bitpalast.net .
     
    Bitpalace, Apr 7, 2016 IP
  3. Blizzardofozz

    Blizzardofozz Well-Known Member

    Messages:
    132
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    118
    #3
    How about making a great background image and if visitor zooms he will see more or less from the background but the background stays still?
     
    Blizzardofozz, Apr 11, 2016 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,176
    Likes Received:
    1,725
    Best Answers:
    239
    Trophy Points:
    515
    #4
    Welcome what happens when someone blows smoke up your backside deluding you into thinking that dicking around in Photoshop is web design. It is NOT.

    Those background images are too massive to belong on any legitimate website for a business, so the REAL solution? GET RID OF THOSE!

    There are other worries -- the yellow or white on that green are below accessibility minimums, the center images reek of "for print" design that has zero business on a website either...

    Lemme ask you this -- forget zoom -- what happens when you're on a device with a smaller screen? A larger screen?

    Figure out what the CONTENT actually is, create semantic markup for that content with zero concern for what it's going to look like, then create your responsive layoutS -- YES, plural! Then and only then do a paintover with accessible colours or product images. Screwing around in a paint program that only works in pixels, creating a single pixel based design is not web design!

    My advice, pitch that scam artist nonsense in the trash and learn what a website is.
     
    deathshadow, Apr 12, 2016 IP