Welcome to WebDesignForums.net!
You're currently viewing WDF as a guest. By registering for a free account, you'll be able to participate with other members in our friendly community. Being a member allows you to ask questions and get answers for those troublesome web development tasks!

In addition, as a member you'll be able to post your websites up for review. Using our unique website review system you can gain some amazing feedback from some of the best web developers around. This is a completely free service to all registered members.

Ready to register yet? Registration is 100% free. Click Here To Join Now!

creating a full photo background website

Discussion in 'Adobe Photoshop Help' started by dreborn, Aug 15, 2011.

  1. Offline

    dreborn New Member

    Message Count:
    3
    Likes Received:
    0
    Trophy Points:
    1
    Hi there, I am trying to emulate this website concept: http://www.canyonpartners.com/

    We are a real estate investment firm and I just want something clean, powerful, and basic. It really is just a landing page with an investor login.

    I have searched and there are a TON of full photo layouts and I know there is a cool way with CSS3 with make a stretch photo but I can't seem to figure out if I should do the whole layout in photoshop or dreamweaver...both?

    I am a noob but I am learning!! I am hungry to be better, thanks for any advice


    dreborn, Aug 15, 2011
    #1

  2. WDF Go Premium, Drop Ads

  3. Offline

    glyakk the voice of reason

    Message Count:
    1,263
    Likes Received:
    6
    Trophy Points:
    38
    Location:
    USA
    Photoshop is not very good at creating the source code for a html page or site. Rather the code it writes is bloated, and inefficient. Dreamweaver would be a better tool, but you may want to consider using that sites source code and css rules, just adapt your information and images. You can view the source on virtually any browser by right clicking the page and selecting 'view source'. Of course this will require the ability to read and use the source.


    glyakk, Aug 15, 2011
    #2
  4. Offline

    dreborn New Member

    Message Count:
    3
    Likes Received:
    0
    Trophy Points:
    1
    hmm, cool idea. simple also...should have thought of that.

    another noob question: where could i find it's css rules?

    edit: silly, i found it.


    dreborn, Aug 15, 2011
    #3
  5. Offline

    dreborn New Member

    Message Count:
    3
    Likes Received:
    0
    Trophy Points:
    1
    EDIT: haha, damn, i must be tired. course nothing would show up because the whole css file is pointing to local images on their server.

    so i copied and created all files from the website (looks like designer made a custom wordpress theme) but for some reason the website cannot read the css file i made. basically, i copied the html and css and made my own local files. imported them in dreamweaver but when i preview it, the css file is clearly not being accessed. as soon as i switch one line of code in index.html back pointing it their css file online, the website displays perfectly. not sure why it's not displaying...

    the css file is named "style.css" and it is stored in the css folder. website/css/style.css

    so i am trying to reference it by: <link href="css/style.css" rel="stylesheet" type="text/css" />

    any ideas?


    dreborn, Aug 15, 2011
    #4
  6. Offline

    smedz28 Member

    Message Count:
    41
    Likes Received:
    3
    Trophy Points:
    8
    Gender:
    Male
    Location:
    Scotland, UK


    smedz28, Aug 15, 2011
    #5
  7. Offline

    m3n0tu18 WDF Moderator and Drupalite!

    Message Count:
    1,373
    Likes Received:
    248
    Trophy Points:
    63
    Gender:
    Male
    Location:
    New York
    Here you go man, This should solve your issue.

    First make a high quality 1024x768 background image. keep the res high but not so high that it will take ages to download.

    Next replace your body tag code in css. Changing parts of it like background name etc.

    Code:
    body {
	margin:0;
	padding:0;
	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;
}
    And Job Done,

    Hope this helps


    m3n0tu18, Aug 16, 2011
    #6
    Alamalloy likes this.
(You have insufficient privileges to reply here.)

Share This Page