Is it possible to make a background image in css link?

I'm building tiles of services and its all done in CSS calling for the background from image files. There's text which I know I can link but I want the whole tile to be a link and just have a border appear when people mouse over it (know how to do that) but I don't know how to code the tile as a whole as a link.
Help?

Line 67, Column 145:         document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
…content" class="serviceBoxcontentBody"><span style="float: left; width: 219px;…
✉
The mentioned element is not allowed to appear in the context in which       you've placed it; the other mentioned elements are the only ones that       are both allowed there and can contain the element mentioned.       This might mean that you need a containing element, or possibly that       you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a       block-level element (such as "<p>" or "<table>") inside an       inline element (such as "<a>", "<span>", or "<font>").
But it works. Ok, what it the proper way to do this, please. Everything else validates fine.

Similar Messages

Is it possible to make the background of an image transparent in indesign?

is it possible to make the background of an image transparent in indesign?

It's not necessarily the best way, but depending on the image content, you might be able to get an acceptable result with the options under Object > Clipping Path...
EDIT: So technically, the answer to your question is: No, but you can apply a clipping path to hide the background.
Also, again depending on the image content, as well as the underlying content, it might be possible to use blend modes in the Effects panel to render the background transparent.
Background removal is best done in Photoshop, where the image can then be saved as .PSD and its native transparency will be honored when placed in InDesign.

How to make a background image appear to grow slowly as text happens front

How do I make a background image which is simply a static image of Earth in space "seem to grow closer" by just slowly enlarging the image as text appears in front of it? Can't seem to find anything intuitive on how to accomplish this. I'm sure it's simple but I just can't seem to wrap my brain around it.

Double click your image to load it into the viewer. On the top of the viewer are 3 tabs, select the one that says "Motion." Inside of this tab you can animate any video or still image. For what you are wanting to do the Scale option will be the place to start. I think Scale is pretty self-explanatory, but just in case...click the keyframe button and type in a number for the scale (like 90). Scrub down a bit with the playhead and type in a new number next to scale (like 175). A new keyframe is created and you have yourself a zoom in.
Ryan

How is it possible to adjust the background images and the text in Mail?

How is it possible to adjust the background images and the text in Mail?

Here's the solution I used to solve the same problem. If you're not comfortable editing the source files, this might be more than you want to take on--but I've done it to several files with no ill effects. You can follow the instructions on this page and the referenced original post from (he includes a link on the page). Good luck! He's got some great tips on some of his other pages.
http://photo.rwboyer.com/2010/03/15/aperture-3-book-theme-trick/
A warning about editing the Master pages--it only edits them in that book--it doesn't update the theme. So if you go to create another book with those same layouts, you'll have to duplicate the book and replace all the images. An alternative would be to create a "clean" book with no photos in it and then just use that as a starting point each time.

How can you make a background image change to a faded state at a certain point in scroll?

I'm referring to a technique I've seen used in Relevant Magazine's iPad app if anyone has used it. I understand having a shape behind text that has a feathered gradient and when you scroll the text the shape gradually fades out the background image. But this is not the effect I'm trying to acheive. On some of the articles in Relevant, the screen is a full image and as you scroll the type up, the entire background dims when you scroll to a certain spot.
I've tried searching for hours, but I feel like I'm getting no where because I don't really know what to search for. I feel like it requires use of something other than what DPS is capable of. Hopefully this makes sense and I'd greatly appreciate any suggestions and help!
Thanks!

Try applying the feathered gradient to the scrollable content frame, not the background frame. It will appear to change the color of the background frame.

Using the CSS tab, how do I make the background image stretch as.....

... as opposed to repeat.
Thanks!

"motleyscrewed" <[email protected]> wrote in
message
news:gan8i5$6t9$[email protected]..
> ... as opposed to repeat.
Are you talking about a real image in the markup (an img
"tag") or about a
background image?
Background images do not stretch, real images will resize to
whatever
dimensions you set for them in the styles sheet.
As a side note, IE has a filter that allows "background
images" (note that
they are not really background images) to stretch (Google
"AlphaImageLoader
scale").
Thierry
http://www.TJKDesign.com/go/?0
| Articles and Tutorials
http://divahtml.com/products/scripts_dreamweaver_extensions.php
| Extensions
that keep your markup clean
http://webassist.com/professional/products/productcategory.asp?CID=8
| CSS
Sculptor, CSS Menu Writer, etc

How to make a background image stretch?

I notice there are two options for background option "tile" and "original size". What happened to stretch? I would like the background image to take up the whole page no matter what size the browser window is. Easy enough to do with CSS and HTML. Any ideas on how to do this, am I missing something, or can I employ some sort of trick to achieve this? Thank You : )
Regards,

It's available for the Page background in the Inspector/Page/Layout pane but not for the Browser background.
Click to view full size
OT

Help needed making background image a clickable link

Hi guys,
I want to make the background of my site an advertising background where the background image is clickable.
I've tried a few tutorials but none seem to be working
What I've got is this as 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...
<div id="skin"><a href=""><img src="background.jpg" /></a></div>
It kind of works but the link is only a thin strip either side of the screen for some reason and doesn't span the whole image background.
Does anyone have any ideas as to where I'm going wrong?
Thank you very much and hope to hear from you!
SM

Spindrift wrote:
Basically, what I want to do is have an advertising skin as the background (can just be a dummy container div to act as the background) of my website, so that it fills the area outside my sites' container div and opens a link when clicked on.
Does 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-size image for the background, unless you plan to repeat it and set the clickable container to exactly that size. See code and screenshot below. Tested in FF, Chrome and IE9.
<head>
<style>
body {
    width:100%;
    height:100%;
    margin:0;
#background {
    background: #000 url(your-background-image.jpg) no-repeat 0 0;
    display: block;
    height: 1280px; /* change to your image height */
    position: fixed;
    width: 1920px; /* change to your image width */
#wrapper {
    background-color: #FFFFFF;
    border: 1px solid #333333;
    left: 50%;
    margin-left: -480px; /* half the width */
    min-height: 500px;
    position: absolute;
    width: 960px; /* wrapper width - unclickable area */
</style>
</head>
<body>
<a href="" id="background"></a> 
    <div id="wrapper"> 
        <header>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>

ADF panelGroup component's background image in CSS does not render

Hi,
I have an issue with the panelGroup component, where a background-image specified in the styleClass DOES NOT RENDER when deployed on the OAS. It works fine when I run the page on my local OC4J.
I've verified that the image I use is deployed correctly on the server.
We are using :
JDeveloper Studio Edition: 10.1.3.3.0.4157 (Build JDEVADF_10.1.3.3.0_NT_070619.1129.4157)
Oracle Application Server: 10.1.3.5.0 running on RHEL 5.
I'm customizing pages of an ADF application to change the branding and skinning. The page header region used in the application uses a 'panelPageHeader' and the image I need to introduce is part of branding and must be rendered above the application menus (2 levels: 1->MenuTabs, 2-MenuBar).
If it would help to see how my page renders locally, here's the link: http://tech-nik-alley.blogspot.com/2010/09/adf-panelgroups-background-image.html
(The brightly colored bar above the menus is newly introduced, ABC_Lightbar.jpg).
Using an objectImage with my light_bar image as source, directly in the facet menu2, causes the alignment of all pages to get disrupted. Hence the work-around of using the image as a background.
A copy of my pageHeader region is below, with comments. The panelGroup component newly introduced is in the facet "menu2". I've added the CSS definitions in the page as comments as appropriate.
Any pointers on how to debug further, work-arounds etc. are appreciated.
TIA and regards
Deepak.
=====MY PAGE HEADER REGION====
<af:regionDef var="attr">
<af:panelPageHeader styleClass="ss0" > <!—ss0 is "padding:0px;margin-left:14%;margin-right:14%;margin-top:0px;margin-bottom:0px;display:block;background-color:transparent;" -->
<f:facet name="branding">
<af:panelGroup styleClass="ss_brand"> 
<af:objectImage shortDesc="#{imageBean['SS_COMPANY_LOGO'].description}"
source="#{imageBean['SS_COMPANY_LOGO'].physicalName}"/>
</af:panelGroup>
</f:facet>
<f:facet name="menuGlobal" >
<af:panelGroup layout="horizontal" styleClass="ss00" rendered="#{attr.globalMenuShown}">     <!—ss00 is "margin-right:10px;" -->
<f:facet name="separator">
<af:objectImage source="#{imageBean['SS_GLOBAL_SEPARATOR'].physicalName}" shortDesc=""/>
</f:facet>
<af:menuButtons>
<af:goMenuItem text="#{sessionBean.authenticated?pageHeaderBean.loggedInUserInfo:messageBean.SS_GEN_GUEST}"/>
</af:menuButtons>
<af:menuButtons startDepth="0" var="menuGlobal" value="#{menuModel.model}">
<f:facet name="nodeStamp">
<af:goMenuItem text="#{menuGlobal.label}"
destination="#{menuGlobal.fileName}"
rendered="#{menuGlobal.type=='global' && menuGlobal.rendered}"
/>
</f:facet>
</af:menuButtons>
</af:panelGroup>
</f:facet>
<f:facet name="menu1" >
</f:facet>
<f:facet name="menu2" >     
                    
<af:panelGroup rendered="#{skinFamily.menuLayout=='horizontal' and attr.otherMenuShown}">
     
<af:panelGroup layout="vertical" styleClass="pageHeaderLightBar"> 
     
<af:objectSpacer width="22px"/>
</af:panelGroup>
<af:panelGroup styleClass="pageHeaderMenuLevelOne"> 
<af:menuTabs startDepth="0" var="menuTab" value="#{menuModel.model}">     
<f:facet name="nodeStamp">
<af:goMenuItem text="#{menuTab.label}"
destination="#{menuTab.fileName}"
rendered="#{menuTab.rendered and menuTab.type!='global'}"/>
</f:facet>
</af:menuTabs>
<af:menuBar startDepth="1" var="menuBar" value="#{menuModel.model}">     
<f:facet name="nodeStamp">
<af:goMenuItem text="#{menuBar.label}"
destination="#{menuBar.fileName}"
rendered="#{menuBar.rendered}" />
</f:facet>
</af:menuBar>
</af:panelGroup>
</af:panelGroup>
</f:facet>
</af:panelPageHeader>
</af:regionDef>
===================================

'background-image:url("../image/Sunset.jpg")' is a relative URL... relative to the final generated markup. It should be wrong like 99% of the times. You should rather use a styleClass and deal with the background-image with skinning as the skinning engines knows how to deal with such urls. Note that you'll most likely have to define a new resource loader and servlet mapping for the ResourceServlet. I know someone made a blog entry about that, was it Frank or Shay? Hmmm cannot remember... Maybe John as well. Anyway a Google search should yield good results for adf resource loader I think.
Regards,
~ Simon

Setting a background image using CSS Designer

I am trying to set a background image for a page header using the CSS Designer. When I click the browse button the Select Image Source dialog box launches but any time I click on something the dialog box closes and no changes are made. Does anyone know what is causing this?

Which DW are you using and which platform/OS, please? I am unable to reproduce this with CC2014 on OS10.9.4

Is it possible to make a background pic in SAP SCRIPT ..........

PLS LET ME KNOW IF YES

Hi
the background picture can be done easily. Create a window with the size of the whole page. Your Picture should be available as SAP graphic with the correct size and resolution. You may use a BMP or TIFF6.0 format graphics file and load it with SE78.
Then use the BITMAP command in this new window like BITMAP &PHOTO& OBJECT GRAPHICS ID BMAP TYPE BMON DPI 300 .
Make a test print. We used this to print a tax form. As background picture we used the BMP Scan of the form. The variable parts are printed in some other windows on top of the background.
Regards,
ravish
<b>plz dont forget to reward points if helpful</b>

How to make header background image scaleable on all devices

I have a image that is 1920 by 700 px (1920 being the width of my laptops screen full size) that I want to use as a background for a header that is 1920 by 700 px. When I preview the full screen in chrome browers it scales great but when I check the smartshone and tablet view in dreamweaver cc the background is chop off. I need to use it as a background because I want to place a custom navigation menu on top of it. So why is it testing great at full screen and scaleing to any size but when I check the smartphone or tablet view in dreamweaver it looks crazy? Please someone!

If you're interested in building responsive web sites, read this first:
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
To jump start your responsive web project, you can use one of the freely available Responsive Frameworks below: Some people feel these are actually better than FluidGrid Layouts.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap * free extension for DW *
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/

How to make a background image?

I wanted to try something special. For a few pages, and ideally the inside covers of the book, I would like to print a thumbnail of a logo on a white background as a backdrop for some of the pages. I see where to make a photo into the background for a page. But when I try to make the logo as the background, the logo FILLS the page.
Is there a way to make the logo smaller so it will be a just a small thumbnail on the page instead?
Tamra

Welcome to the Apple Discussions. Read Old Toad's Tutorial #19 on how to create custom pages for iPhoto books using the themes background (or one of your choosing). Examples of a custom page and cover are :
Click to view full size
TIP: For insurance against the iPhoto database corruption that many users have experienced I recommend making a backup copy of the Library6.iPhoto (iPhoto.Library for iPhoto 5 and earlier) database file and keep it current. If problems crop up where iPhoto suddenly can't see any photos or thinks there are no photos in the library, replacing the working Library6.iPhoto file with the backup will often get the library back. By keeping it current I mean backup after each import and/or any serious editing or work on books, slideshows, calendars, cards, etc. That insures that if a problem pops up and you do need to replace the database file, you'll retain all those efforts. It doesn't take long to make the backup and it's good insurance.
I've created an Automator workflow application (requires Tiger or later), iPhoto dB File Backup, that will copy the selected Library6.iPhoto file from your iPhoto Library folder to the Pictures folder, replacing any previous version of it. It's compatible with iPhoto 6 and 7 libraries and Tiger and Leopard. Just put the application in the Dock and click on it whenever you want to backup the dB file. iPhoto does not have to be closed to run the application, just idle. You can download it at Toad's Cellar. Be sure to read the Read Me pdf file.
Note: There's now an Automator backup application for iPhoto 5 that will work with Tiger or Leopard.

Is it possible to make the background invisible in an flash desktop application?

Hey there,
I am currently trying to build a small desktop application in flash which works a bit like the scmpoo sheep (scmpoo - Cute little lamb / sheep on your desktop - YouTube). A screenmate with just a few animations and a movieclip tied together in as3.
My problem now is, that the animated animal should a least look like it really moves on the users desktop, since I found no way to really place it there.
I already set it to fullscreen mode, which removes the borders but I can't find a way to make the backgound invisible/transparent. In web-browsers this seems to be quite easy, but does it work for the desktop flash at all?
And if yes, how do I do it?
thanks for helping

window style: custom chrome (transparent);

Background Image Question (CSS)

I have the following CSS style in my head section:
body { margin: 0px; padding: 0px; text-align: center;
background: #fff
url(/images/Home/TopGradBlack.jpg) 0 0 repeat-x; }
...where TopGradBlack.jpg is a black-white gradient measuring
500 pixels
high by 5 pixels wide. The image displays as it should, with
the page
appearing black at the top, grading into white below.
But I want the background to consist of a black-white
gradient on the
left half of the page only, with a blue-white gradient on the
right
half. So I inserted a div (ID = Body2) inside the body and
added another
style, as follows:
body { margin: 0px; padding: 0px; text-align: center;
background: #fff
url(/images/Home/TopGradBlack.jpg) 0 0 repeat-x; }
#Body2 { margin: 0px; padding: 0px; text-align: center;
background: #fff
url(/images/Home/TopGradBlue.jpg) 50% 0 repeat-x; }
But it doesn't work. Rather than displaying from the middle
of the page
rightward, TopGradBlue.jpg dispays clear across the page. If
I change it
to 0 50% repeat-x, then it works as it should, displaying
across the
middle of the page. But when I change it back to 50% 0
repeat-x, it
displays clear across the top of the page.
What am I doing wrong?
Thanks.

I would NEVER use GIF compression with gradients.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"darrel" <[email protected]> wrote in message
news:fu7s37$ja0$[email protected]..
>> So, in other words, it can't be done?
>
> If your gradient is vertical (from top to bottom) just
make the image very
> wide...like 1000 pixels, and save it as a GIF (Gifs
compress really well
> with horizontal bands of the same color). Then do just
as you're doing,
> but omit the 'repeat'.
>
> Otherwise, I assume you're trying to create two columns?
Perhaps the
> solution is to make the gradient a background of the
column wrapper DIV
> isntead of making it a standalone DIV just for the
image.
>
>> similar things before. Also, the percent locator
works on vertical
>> alignment, so I assumed it would horizontally, too.
>
> It 'worked' on vertical because you weren't repeating it
vertically.
>
> -Darrel
>

Is it possible to make a background image in css link?

Similar Messages

Maybe you are looking for