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.

Results 1 to 7 of 7
  1. #1
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    Hi all,

    As I am just learning I have no real design or files that I can upload, I only have a "test page" which I have created to test the code I have learned which includes a couple of random images, paragraphs etc.

    The problem I am having is trying to understand how I can use an image as a the background for my web page. I think it may be to do with the size of the image being used. The test code and CSS I have written to use this image as a background results in the image being tiled until it reaches the end of the page, which is not the effect I was hoping for, is this to do with the size of the page versus the size of the image?

    I assume that because the dimensions of the image are smaller than the dimensions of the page that is why this has happened? I want to have the image fill the whole page for as far as it needs to scroll without the tiling effect, will I have to edit the size of the image in photoshop to fit the page? or is it simply the way that the code is written which determines this?

    I hope that makes sense, I do have files that I can upload to show what I have written but as I said, it's just nonsense at the moment and has only been written to see the effects of the code.

    The image by the way was just pulled from a google search and the size is 500 x 500 px

  2.  

  3. #2
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    You can specify 'background-repeat: no-repeat' and it will remove the tile effect. But if you want to stretch the whole image across the page, then yes, you will have to resize it with an outside program.
    You can also specify 'background-position' for added control.
    This page will give you more info.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  4. #3
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    Ok so looking at my code I have written it more or less as you have pointed out, just need to change to no repeat. I tried resizing the image and the result was that it covered most of the page, so I just need to determine what the page size should be when it comes to my actual project.

    This leads me onto another question concerning the same subject, since I will be creating a background image which will apply to the majority of pages in my project (the website I will be trying to design will have several pages and more added on as time goes by), in terms of page size what is the standard width of a page without having to scroll along? There will definately be scrolling downwards to a certain extent due to the content so that can be determined by how many items per page I want to display, but I am unsure of the width and will need to create my background image to the correct dimensions.

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    You want to be careful with background images - if you make the file too big when resizing, it will slow down page load times, and if you are setting the width to a definite number of pixels, the page will display differently on different monitors. For example, if you take 1024PX as a "normal" monitor size and set your image to that width, then on my monitor (1920 X 1080) I would see space on either side. If you set it to 100% rather than a set number of pixels, that should help, but it will probably blur a bit at higher resolutions.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  6. #5
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Yeah, That's the problem with having a full image as a background. It's either too big, too small, too large etc.
    Here are some stats on resolutions. Check em out.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  7. #6
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    ok thanks, I think I will stay away from that when it actually comes to designing the site, but code wise I now understand why I was getting the effect that I had when first trying it out. Thanks guys
    George Dolidze likes this.

  8. #7
    Junior Member iyornman's Avatar
    Join Date
    Aug 2011
    Location
    Cebu City, Philippines
    Posts
    11
    Member #
    28826
    I'll just give you my idea about it. If you want to put a background image that fits the browser whatever size it is and whatever resolution you have and even if you are having a small size of image you can do it using JavaScript + CSS. I think I would love to post sample site for that.

    http://www.cssplay.co.uk/layouts/background.html


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 06:18 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com