Need help with background image a clickable link

Hi guys,.

I want to make the background of my site a background of advertising where the background image is clickable.

I tried a few tutorials, but none seems not to work

What I have, it's like my CSS...

#skin {position: absolute;
    width: 100%;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    left: 0px;
    z-index: -1;
    background-position: fixed;
}

.. .and this as my HTML code...

<div id="skin"><a href=""><img src="background.jpg" /></a></div>

It works soon, but the link is only a thin strip of hand and side of the screen for some reason any and don't extend to the background of the entire image.

Does anyone have any ideas as to where I'm wrong?

I thank you and hope to hear from you!

SM

Spindrift wrote:

Basically, what I want to do, is to have a skin of advertising that the background (maybe just a dummy container div to serve in the background) of my site, while he fills the area outside the container div of my sites and opens a link if clicked.

Anyone know how I can do this?

This can be done relatively easily, but it's not very pretty. You will need to use a full great for the background image, unless you plan to repeat, and then assign the clickable containing exactly this size. See code and screenshot below. Tested in FF, Chrome and IE9.

Tags: Dreamweaver

Similar Questions

  • Need help with background body color

    Hello world

    I am a completely new Dreamweaver user and have not created a site for years. Last program that I used was the first Page!

    I'm messing with Dreamweaver CS5 and try to create a Web site for my work.

    Here's a problem I have.

    Is it possible to have the background color of your body to be 2 different colors? My site design starts with a 3 bars + header/footer. I have my head looking the way I want to, and now I am trying to get my background color for the body to be right. I speak not of 'body' is the one that surrounds the header/footer page, column, content, left column.

    Right now it's a solid color that I adjusted using the page properties.

    Is it possible to have a color starting at the top of the page and end at the back of my head, and then have the rest of the body (under the header) be a completely different color?

    If so, any help would be greatly appreciated!

    Thank you!

    Vik

    I am a completely new Dreamweaver user and have not created a site for years. Last program that I used was the first Page!

    You certainly need to examine your HTML and CSS, then, as DW will be expected to bring you knowledge both at the table.  PS didn't feel it's valid HTML or coding standards.  It is diametrically opposed to the current version of DW!

    Is it possible to have a color starting at the top of the page and end at the back of my head, and then have the rest of the body (under the header) be a completely different color?

    Give the body of the page a single color as its background color.  Make the color of the region under the heading.  Then use a graphic rectangle unique color that is as big as your head and you set as background image for the page, having only horizontal place with this CSS.

    Body {background - image: url (path_to_your_image.gif); background-repeat: repeat-x ;}}

    Who should do in light of the information you have provided to us.

  • Help with background image

    I am one of those old creators shaped 'table' who decided to try the new way, CSS sites.

    I tried to enter a background image to a page and put a table on the top. It did not work because when I added another table inside the main table it reproduces the background which was attached to the page image and not the table.

    So I decided to do it in CSS and strange, this duplication thing happened here as well. When you hit the enter diplicates a band thin of the background of the page.

    I have attached two screenshots. The first is what it looks like in DreamWeaver CS4 and the other in the browser.

    error1.jpg

    error2.jpg

    The CSS looks like this:

    body, p

    {

    margin-left: 0px;

    margin-top: 0px;

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-position: left top;

    background-image: url(images/Agtergrond2S.jpg);

    }

    #container {}

    }

    {#headerarea}

    padding: 10px;

    height: 20px;

    width: 800px;

    left: 260px;

    top: 141px;

    position: absolute;

    are-family: Arial, Helvetica, without serif.

    are-size: 16px;

    make-weight: bold;

    color: #FFF;

    }

    {#leftarea}

    padding: 10px;

    height: 600px;

    width: 250px;

    position: absolute;

    left: 0px;

    top: 141px;

    }

    {#mainbodytext}

    padding: 10px;

    height: 100%;

    width: 700px;

    position: absolute;

    left: 260px;

    top: 220px;

    are-family: Arial, Helvetica, without serif.

    are-size: 12px;

    make-style: normal;

    color: #FFF;

    text-align: left;

    background-image: url(images/trans-test.png);

    background-repeat: repeat;

    }

    #header {}

    padding: 10px;

    height: 20px;

    width: 700px;

    position: absolute;

    left: 260px;

    top: 170px;

    are-family: Arial, Helvetica, without serif.

    -font size: 24 PX.

    make-weight: bold;

    color: #FFF;

    }

    {#footerarea}

    padding: 10px;

    height: 30px;

    width: 1280px.

    position: absolute;

    left: 0px;

    top: 800px;

    }

    a,

    a: visited,

    a: link {}

    color: #424242;

    are-family: Arial, Helvetica;

    are-size: 12px;

    text-decoration: underline;

    make-weight: bold;

    }

    a: hover {}

    color: #666666;

    are-family: Arial, Helvetica;

    text-decoration: highlighted underscore;

    are-size: 12px;

    make-weight: bold;

    }

    a: {for more information

    color: #oooooo;

    do-family: Arial, Helvetica;

    text-decoration: underline;

    do-size: 12px;

    make-weight: bold;

         }

    . {To header

    are-family: Arial, Helvetica, without serif.

    are-size: 18px;

    make-style: normal;

    make-weight: bold;

    color: #cc0000;

    }

    . OPPORTUNITY {}

    are-family: Arial, Helvetica, without serif.

    -font size: 13px;

    make-style: normal;

    make-weight: normal;

    are-variant: normal;

    }

    And the page itself looks like this

    < html >

    < head >

    < title > < /title > African surveyors

    < meta http-equiv = "Content-Type" content = text/html"; charset = iso-8859-1 ">"

    < META name = "Description" content = "engineering and topographic surveyors, surveyors African," > ""

    < META name = "Keywords" content = "surveyors, African, African, topographic surveyors in engineering, land surveyors" >

    < META name = "robots" content = "ALL" >

    < META name = "copyright" content = "" >

    < META name = "rating" content = "Général" >

    < META name = "revisit-after" content = "14" >

    < META name = "language" content = "EN" >

    < META name = 'distribution' content = 'Global' >

    < meta http-equiv = "Content-Type" content = text/html"; charset = iso-8859-1 ">"

    < link href = "style.css" rel = "stylesheet" type = "text/css" > "

    < script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "

    < link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" > "

    < / head >

    < body >

    < div id = "container" >

    < div id = "headerarea" >

    < ul id = "MenuBar1" class = "MenuBarHorizontal" >

    < li > < a href = "#" > about us < /a > < /li >

    < li > < a href = "#" > contact us < /a > < /li >

    < li > < a href = "#" class = "MenuBarItemSubmenu" > Services < /a >

    < ul >

    < li > < a href = "#" > rendering 3D < /a > < /li >

    < li > < a href = "#" > example 3 < /a > < /li >

    < /ul >

    < /li >

    < li > < a class = "MenuBarItemSubmenu" href = "#" > point 3 < /a >

    < ul >

    < li > < a class = "MenuBarItemSubmenu" href = "#" > point 3.1 < /a >

    < ul >

    < li > < a href = "#" > section 3.1.1 < /a > < /li >

    < li > < a href = "#" > 3.1.2 < /a > < /li >

    < /ul >

    < /li >

    < li > < a href = "#" > point 3.2 < /a > < /li >

    < li > < a href = "#" > point 3.3 < /a > < /li >

    < /ul >

    < /li >

    < li > < a href = "#" > point 4 < /a > < /li >

    < /ul >

    < / div >

    < div id = "leftarea" >

    < p > the left connect domain < /p >

    < / div >

    < div id = "mainbodytext" >

    < class p 'Body_text' = > place the body of the text here < /p >

    < class p = 'Body_text' > and several body text here < /p >

    < class p = 'Body_text' > < / p >

    < / div >

    < div id = "footerarea" >

    < p > < /p > footer area

    < / div >

    < / div >

    < div id = "header" >

    < h1 class = "Header" > African surveyors < / h1 >

    < / div >

    < script type = "text/javascript" >

    <!--

    var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})

    ->

    < /script >

    < / body >

    < / html >

    Hello:

    You have a class css as follows:

    body, p

    {

    left margin: 0px;

    margin-top: 0px;

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-position: left top;

    background-image: url(images/Agtergrond2S.jpg);

    }

    This applies to the body and p tag.

    So when you enter, you generate one

    tag and, therefore, this image is applied due to the class above as a backdrop.

    I hope I am on the right track...

    Thank you

    Vinay

  • Need help with tutorial images Gallery.

    Hi all

    No response from Apex listener Forum... moved here...

    Headset - 2.0.2.133.14.47 apex

    Apex - 4.2.2.00.11

    When you run the image gallery application according to the tutorial, page just show a blank screen with no image upload button.

    Use 22.0 Firefox and Chrome 28.0.1500.72.

    Firebug does not display a script error.

    Has recreated the tutorial on apex.oracle.com with the same result as above.

    http://Apex.Oracle.com/pls/Apex/f?p=4550:1:F4550_P1_COMPANY:HANAMIKE

    Workspace: HANAMIKE

    User name: [email protected]

    Password: yesla


    Using the user name = resteasy_admin password = resteasy_admin on apex.oracle.com.

    Had changed the JS tutorial below:

    var workspace_path_prefix = "resteasy";     = > var workspace_path_prefix = "hanamike";


    Another strange problem was when to try the RESTFUL according to the tutorial service when you click on the button 'TEST', has detected the error 404

    Problem on behalf of space of overtime in the URL as below:

    http://Apex.Oracle.com/pls/Apex/hanamike/hanamike/gallery/images/

    Had to manually change:

    http://Apex.Oracle.com/pls/Apex/hanamike/gallery/images/


    Note that the version of the listener on apex.oracle.com is:

    APEX_LISTENER_VERSION2.0.3.165.10.09


    Thanks in advance.

    Zack


    Post edited by: Zack.L

    Hi Zack,

    Please provide the credentials to connect to your workspace.  I took a quick glance to your RESTful Service and applications associated and noticed that he was missing something - the "Upload Image" button! It seems therefore that the section "Create the gallery app" is not a step to create an HTML region, with the model "Button region without title" of the region and with its region defined as source:

    Download Image

    You will see in the JS that there is a reference to #upload - btn, but there is no object on your page.  I created a copy of your application, which includes this new area of HTML, and you'll see I downloaded an image as a demo.  I contacted the team APEX listener re missing instructions, for which I hope will be fixed in the next version.  My apologies for the confusion, but I hope that you are on the right track now.  Regarding the behaviour you noticed with the URL generated by the 'Test' utility, thanks for that bring to our attention.  I'll do some additional research it and log a bug if necessary.

    Kind regards

    Hilary

  • Need help with background noise?

    If some people have been talking and making nosie while I was recording minecraft and talk about how to remove or disable it?

    HawkEye,

    Welcome to the forum.

    I agree with Steve, and especially if you have human voices, which must be removed without affecting the other sounds in your video.

    Tips & tricks article talks about general background noise and its mitigation or removal: http://forums.adobe.com/message/2860521#2860521

    Unfortunately, your case will be a bit harder, because you need to mitigate or remove Audio-specific, speific points - much plus-travail by hand, with less overall adjustment. Yet, with the work, you could get more close to what you want.

    Also, see this article for tips & tricks, to mitigate the Volume (and Gain), an Audio Clip, even at specific points: http://forums.adobe.com/message/3472343#3472343

    Good luck

    Hunt

  • Good afternoon - need help with two images

    Good afternoon


    First of all, I apologize if my English isn't the best but it is a translation.


    I am new to Photoshop and decided to ask for help here in the forum to try to solve a problem that I can't solve alone.


    I have a normal 2D image .jpg and have another .gif image is a logo rotating in 3D (I can export this logo in .swf or other format if the .gif is not in the correct format).


    I wanted to unite these two images, rely on image .jpg and .gif image over the base in run (revolves around logo) and the junction of the two images together for an image final (with the spining logo) to export.

    The final format, could be .jpg or .gif, or any other format.


    My question is if may be possible to do this with Photoshop or another program to form Adobe?

    Already thank you very much for your help.

    Best regards

    Davcorsil

    Alongside the Mylenium suggestion, you can do it in first (the Pro, or the Elements version), BUT you'd end up with an AV file and NOT a file 'image', as such.

    An additional step using a NLE (of Non-linear editing) would be that your animated GIF would work better, if it has been converted into file AV with Alpha for transparency. Then, like layers in Photoshop, one would put the image on the video from track 1, with the converted GIF AV file on video Track 2. Export to a format/CODEC selected AV. Fact. Don't forget, this exported file would be an AV file, NOT an image.

    Rather than use the animated GIF, I would rather choose export as a file of my 3D application AV. Most allow several formats/codecs. For material from SD (Standard definition), the ultimate choice would be DV - AVI Type II, using the MicroSoft DV CODEC, or on a Mac, like. MOV with the CODEC of Animation. In these cases, you want to export in million + colors. This + is important, because it will be the Alpha channel for transparency.

    Good luck

    Hunt

  • Need help with auto image stretching using Muse

    IM using Adobe Muse to create a site basic Web and im having trouble getting the image to stretch with the browser. A cap of the cover page is attached. The upper left corner of the image I wanted fixed and low position on the right to stretch with the browser (see marks in yellow in the picture). Y at - it a trick of HTML code that could do with Muse?

    Help-1.jpg

    I suggest you change the order of layers autour i.e. have the images scroll BELOW the menu instead of on top of it, but it's your companion site.

  • My picture if you go full screen has white particles everywhere. I don't see it until I save for web. [was: need help with an image]

    Self-adhesive transparent GIF - find and share on GIPHY

    My picture if you go full screen has white particles everywhere. I don't see it until I save for web. No idea how to solve this problem? I've never had this problem before.

    This article gives to think the matte color change Transparent gif in Photoshop tutorial - PhotoshopCAFE

    See if that helps.

  • Need help with an Image very destroyed

    So I scanned a picture someone wants me to restore and realized that everywhere WHERE there are traces of fingers that is apparently impossible for me to make decent looking. I tried to use the clone brush, as well as strong overlays, but without success. Any advice or help that you can give?

    Thank you!

    Clarlie Parks 1973.JPG

    It will be difficult to do, but it's doable.

    Here's a partial retouching, which has involved the color range selections, Desaturate, applying the median filter, paint, etc.  It is absolutely not a year ended, just a proof of concept in progress.

    Toning can be applied afterwards, of course.

    Do not give up.

    Photoshop is very powerful, but nobody said it's easy.

  • Lightroom5 - need help with importing images

    I have read the manual and looked at the videos and my pictures won't still import. The source is recognized in the left menu.

    Lightroom5, SanDisk card and reader, Leica M.

    Any suggestions?

    In a different search, someone recommended an update of Adobe, who has travelled by train.

    I never would have guessed an update would be necessary or working day after you download the program from Adobe for the 1st time. :|

    Thanks for your help.

  • Need help with moving around images

    I need help with moving images and images around the dreamweaver document window. My brother gave me his computer witch a dreamweaver MX (it is in Irag) so I can start building my own construction sites. I went to borders and bought a book on dreamweaver MX. Here's where I'm having a problem with: when ever I bring an image in the document window, I can't move the image around the document window. The book says "place the insertion point where you want the image to appear" but there is no insertion point. There is just a straight line as if I am trying to type something. It's almost as if I'm in microsoft word. If I take the mouse on the image, and then left click and try to drag the image to the location I want, it does not move. Can someone please help me with this problem. Thanks Jical

    Thank you for the answer to my question. This was really helpful.
    Jical

  • I have a mess of error. about microsoft Isatap adapter... plug and play id root\ * Isatap\0002 error tv-configmgrerr31 need help with drivers

    need help with this.is there a link for the drivers. The only changes to my system is a new modom.netgear wireless g54.thank you

    Hello

    (1) what is the complete error message you receive?

    (2) when exactly you get this error message?

    (3) how long have you been faced with this problem?

    You can ignore this error message. This error message does not indicate a problem with the adapter. The adapter will continue to function correctly.

    See the article below

    On a Windows Vista-based computer or on a Windows Server 2008-based computer, the Microsoft ISATAP map appears with a yellow exclamation mark next to it in Device Manager, and you also receive an error message
    http://support.Microsoft.com/kb/932520

  • Need help with image fusion

    Hello

    Before I get to my question, I want to give you a glimpse of the project I'm working on and the aspects that I need help. For a school project, a customer, 94Fifty asked us to create an advertisement that depicts their basketball and could be used in advertising online and in magazines. The 94Fifty of basketball is the world's first "smart ball." It can count how many times you dribbling, the arc of your shot, release time it takes for you shoot, etc. To use the ball, you need an Apple product that can download the application 94Fifty on the App Store, so that this project is done as a collaboration with the company 94Fifty and Apple.

    For my ad, to really capture the idea of being the first smart ball, 94Fifty ball I wanted to mix an image of the texture of the ball of 94Fifty, with the shape and details of a brain, with the slogan being, "A ball that is as smart as you." I have my design buried on, but I'm not sure how to combine the image of the brain with ball should I use layers? How can I remove the pink color of the brain and replace it with the ball while keeping the shape of the brain and the lines creased the brain? Any help and technical that you can give would be greatly appreciated.

    Here are two pictures that I'm trying to mix.

    8376271918_cf0b1b5c4f_o.jpg94fifty ball.png

    I would also try and keep the logo of 94Fifty which is on the ball in the mixed picture.

    Please do not confuse this for to ask me someone to do it for me, it's the exact opposite of what I want, I just need help with what to do.

    Here is a fairly simple method:

    First of all, level of basketball for the type to be horizontal. (Also correct the values of white light - burn at the top left and bottom top right.)

    Mask on white background of the brain and turn the image to 0% of saturation.

    Put the brain on basketball on its own layer. Make the overlay blend mode.

    Using free transform, reshape the brain is greater (rounder), like the basketball, with a visible margin around the edge of the ball.

    -Now, you have a brain in a basketball, but the brain is a bit too subtle.

    Duplicate the layer of brain as many times as you need to get the good contrast (I've duped the layer of brain three times, for a total of four layers of brain).

    You will probably find that you need to use the levels adjustment layers or curves on each layer of the brain, for finer value adjustments. Make sure that each adjustment layer affects only the layer directly below.

  • Hello, I need help with my photoshop, rececently the majority of my family disappeared merger options and I cant access AVC and other options ive tried reset preferences and it seems to come back but when I add an image and try add text again

    Hello, I need help with my photoshop, the majority of my family rececently disappeared options fusion and I can't access strokes and other options ive tried to reset the settings of preference and he seems to come back but when I add an image and you try to add text again, they'll only options I have are drop shadow , gradient, Chromakey, shine of satin overlay, inner (I use photoshop cc 2015) Please help, my Skype contact options are: RoblivionM8 and email:[email protected]

    Thanks for your time

    Your first screenshot shows the layer style dialog where not all types of effects are indicated on the left. Bottom left of the dialog box, you see a small icon fx with a menu arrow drop-down. Use drop down the menu and make sure all you click on show all effects or restore the default list. I don't know what you're trying the shoe on the second screen capture.

  • Need help with mobile layout

    Hello. Need help with my layout sensitive, using straight lines only html5 and css3 that I can understand and explain a novice level please - without any restart. Desktop and mobile are in a single html doc. The desktop version is 'ok '.

    current version (6_2)

    Try to match these mobile Office layouts

    On the mobile version:

    -Impossible to get the buttons nav blocks, vertical text button Align, and align the image of the product (square pictures) to the Center. (margin: auto; does not work)

    I used heights in the header because I'll have code for desktop, mobile and tablet in the CSS so it changes (and do not know how to support better). Also need to Add a link to the logo image background in header.

    Thanks in advance!

    TheOriginal150mph wrote:

    Hello. Need help with my layout sensitive, using straight lines only html5 and css3 that I can understand and explain a novice level please - without any restart. Desktop and mobile are in a single html doc. The desktop version is 'ok '.

    current version (6_2)

    Try to match thesemobile Officelayouts     

    On the mobile version:

    -Impossible to get the buttons nav blocks, vertical text button Align, and align the image of the product (square pictures) to the Center. (margin: auto; does not work)

    Commenting on just a habit of property changing the css if you have defined it for the desktop version. Your nav elements are not vertically Center because you have a bottom padding set on them for the office, there are only changes for mobile in your css media query.

    .main-nav a {}

    display: block;

    text-decoration: none;

    / * padding-bottom: 15px;   */

    Padding: 12px 0;

    }

    Change the properties for the .product-images for mobile boxes: you have float attached to them for the desktop version and which cascade down to the mobile version, unless you change in the media query:

    .product-image {}

    float: none;

    Width: 50%;

    margin: 0 auto 20px auto;

    }

    As I mentioned in one of my posts related to your project, you will probably have to make your product images a bit larger. They fill the area once they form a column to width of 768px screen or you could resist transform them to one column until a little more by using a media query extra set at a narrow screen width to evoke this action

Maybe you are looking for