Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 15
Like Tree1Likes

Thread: Sizing image for backgroud

  1. #1
    Junior Member
    Join Date
    Dec 2014
    Posts
    12
    Member #
    41162

    Sizing image for backgroud

    When I go to add an image through page properties in DW at 1920x1080 it only shows the top half. How can resize the image and what are the standard dimensions of an image going to be used as a background for a web page?

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,724
    Member #
    5580
    Liked
    718 times
    You're not getting many responses for this thread because there is no standard dimension.

    People use desktops, laptops, tablets of various sizes, smartphones, etc.

    Everyone's screen size if different, and rotating a device from portrait to landscape changes dimensions once again.

    That's why backgrounds on most web pages are not really "one image", but a small repeatable image that is seamless and appears like one image. As screen sizes change, the image only fills what it needs to fill.

    Web pages designed for all screen sizes are called "responsive". You can look that up on Google for examples.

    Now, it's possible you're not talking about "background" images? Maybe you mean a banner image or slideshow? You may want to show us a page that you're talking about so we can see what you are describing.


  4. #3
    Junior Member
    Join Date
    Dec 2014
    Posts
    12
    Member #
    41162
    For a standard webpage. I would like to optimize for both if I can. And by background image I mean what this man in the video is doing in this link he sets it to no repeat and it does one stretch image. Mine either does not stretch or stretches too much.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,724
    Member #
    5580
    Liked
    718 times
    How about this ... put your background image somewhere online where I can download it and try to make a working example.


  6. #5
    Junior Member
    Join Date
    Dec 2014
    Posts
    12
    Member #
    41162

  7. #6
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    CSS:

    background-size:cover

    It will make the background image fit inside the container. It's like choosing "FIT" for your wallpaper size.

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,724
    Member #
    5580
    Liked
    718 times
    Making it more compatible to browsers:

    <style>
    html {
    background: url(Road.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    </style>


    Here is a working test:
    http://www.catpin.com/fit/
    YagnikWp likes this.


  9. #8
    Junior Member
    Join Date
    Dec 2014
    Posts
    12
    Member #
    41162
    body {
    background-image: url(rl4.jpg);
    background-repeat: no-repeat;
    }
    </style></head>
    this is what I get. Do I just add to it?

  10. #9
    Junior Member
    Join Date
    Dec 2014
    Posts
    12
    Member #
    41162
    I enter this and I get nothing.
    }
    body {
    <style> <head>
    html {
    background: url rl4.jpg no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    }
    </style></head>

  11. #10
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    your background css line is incorrect

    background: url('rl4.jpg') no-repeat center center fixed;
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs




Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:35 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com