www.webdeveloper.com
Results 1 to 12 of 12

Thread: background image

  1. #1
    Join Date
    Apr 2013
    Posts
    36

    background image

    hi

    i get psd design that have wood style background image that cant be reapet.
    and his size is width-1250px and height-900px
    how i can make it work to other resolutions ?
    i myself use w-1280 h-1024 px

    is something i can do? or when i get designs like this it
    can be work only in his image background resolution


    in this website is seems that alot of people will not be viewed the website good
    http://www.hobo-web.co.uk/best-screen-size/

    + if i take the image and resize it to the most use resolution[1366x768] size it will look nasty in resolution like
    width-1250px and height-900px

  2. #2
    Join Date
    Apr 2013
    Posts
    36
    i try anther work of my and is look nasty in 1920x1200
    i psd to html/css this in my resolution 1280x1024
    and it dosnt look good
    i dont know if you can see this cus i upload this file from my localhost. but i test it here:
    http://www.infobyip.com/testwebsiteresolution.php

    what should i do make the position all the time in % and not in px?

  3. #3
    Join Date
    May 2013
    Posts
    55
    Hi, background image is only re-sizable in HTML5 or CSS3, if you are using CSS3 then here is the code:
    html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

  4. #4
    Join Date
    Jul 2013
    Posts
    9
    you can also use css background image generator to generate background image easily for your site

  5. #5
    Join Date
    Apr 2013
    Posts
    36
    Quote Originally Posted by Harith View Post
    Hi, background image is only re-sizable in HTML5 or CSS3, if you are using CSS3 then here is the code:
    amazing thank you
    only now i try this sorry.

  6. #6
    Join Date
    Apr 2013
    Posts
    22
    I am having the same problem with background images. Here is my code:

    Code:
    body {
    	font-family: Palatino Linotype, serif;
                  background-image: url(../images/books%20music%20bands%201617x1076%20wallpaper_wallpaperbeautiful_9.jpg); 
                  	background-repeat: repeat-x;
    }
    #content {
    	margin: 0 auto;
    	min-width: 800px;
    	width: 80%;
    	background-color: #87CEFF;
    }
    #header {
    	height: 300px;
    	background-image: url(../images/lindaplume.jpg);
    	background-repeat: no-repeat;
    }
    I even tried adding the styling for html and with the cover values:

    Code:
     html { 
     background: url(../images/books%20music%20bands%201617x1076%20wallpaper_wallpaperbeautiful_99.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
    }
    But nothing worked. I have tried my image multiple times, but it didn't work either. It is 1000px in width by 300px in height.

  7. #7
    Join Date
    Apr 2013
    Posts
    22
    Quote Originally Posted by NorrinRadd View Post
    I am having the same problem with background images. Here is my code:

    Code:
    body {
    	font-family: Palatino Linotype, serif;
                  background-image: url(../images/books%20music%20bands%201617x1076%20wallpaper_wallpaperbeautiful_9.jpg); 
                  	background-repeat: repeat-x;
    }
    #content {
    	margin: 0 auto;
    	min-width: 800px;
    	width: 80%;
    	background-color: #87CEFF;
    }
    #header {
    	height: 300px;
    	background-image: url(../images/lindaplume.jpg);
    	background-repeat: no-repeat;
    }
    I even tried adding the styling for html and with the cover values:

    Code:
     html { 
     background: url(../images/books%20music%20bands%201617x1076%20wallpaper_wallpaperbeautiful_99.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
    }
    But nothing worked. I have tried my image multiple times, but it didn't work either. It is 1000px in width by 300px in height.
    I meant that I tried resizing my image multiple times, but it did not work.

  8. #8
    Join Date
    May 2013
    Posts
    55
    Quote Originally Posted by NorrinRadd View Post
    I meant that I tried resizing my image multiple times, but it did not work.
    Hey,
    make sure in your HTML page there is this code at the very beginning:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    It worked for me

  9. #9
    Join Date
    Jul 2013
    Posts
    5
    I think there is a problem with your url.You are giving long path in url that may create problem

  10. #10
    Join Date
    Apr 2013
    Posts
    22
    Quote Originally Posted by ethan12 View Post
    I think there is a problem with your url.You are giving long path in url that may create problem
    Thank you for your reply. For some reason, I was able to make it work.

  11. #11
    Join Date
    Aug 2013
    Posts
    4
    for background image we will use the body cls and add all property of body.

  12. #12
    Join Date
    Apr 2013
    Posts
    36
    when you want make this:

    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;


    in [ background-color: #1be6d6; ]
    what i need to do?

Thread Information

Users Browsing this Thread

There are currently 5 users browsing this thread. (0 members and 5 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles