Background image covers everything else

I have an existing website built with a fixed layout. Now I'm trying one with a liquid layout. I want the background image to stretch to fit all screens. I found a scrap of code that accomplishes it but now the images covers everything else.
Is there a way to put the image behind the rest, or a better way to stretch the image itself?
www.ShredSkins.com
The code for the site is pretty messy - it'll get optimized when everything works.
Thanks!
-Ace-

Looks to me like the image has merely been inserted as an absolutely positioned inline image.
#background {position:absolute; z-index:1; width:100%; height:100%;}
<img id="background" src="images/ShredSkins Index.png" />
You'd have to position the container div and give it a z-index of greater than 1 to see it on top of the inline "background" image.

Similar Messages

Why a background fullscreen slideshow covers everything else?

Ciao, I'm building a folio with InDesign CC 2014 on a Mac. I've created pages with the Slideshow overlay in full screen on an iPad, then I've added another layer with the text: this should be a text with a swipe-to-slideshow under it. Why does the slideshow appear like there was anything else on the page? the multi-state object is the only thing I see, and cannot see the text above.
Thanks for helping on this!
Mauro

They are called overlays for a reason. They overlay static content.
If you want the text to appear above the slideshow convert it to a slideshow as well. Set it to autoplay once with no crossfade and no delay.

Background image covers layer background.....

How is this for simple?
http://www.animalcrackerspetsupply.com/BlankPage.html
What you are supposed to see, but are not seeing, is a "mango" colored box in the middle of the page. It shows up perfectly fine in Dreamweaver, but does not show up when I preview or upload it to any browser. I have done this previously with just a color on the page background instead of an image and it worked fine, (http://animalcrackerspetsupply.com/index.html) but I cannot make it work with this image as the background!
I have tried playing with z-index and visibility and nothing works. Other layers on the page show up just fine (ex: http:www.animalcrackerspetsupply.com/Index1.html).
What gives? I am using Dreamweaver 8 (because I can't afford CS5!!)
Thank you,
Kelly

It's there, just invisible because of no background color and no content.
You forgot the # sign in front of the background color in the css:
background-color: CC9966;
instad of:
background-color: #CC9966;

Cannot boot from leopard disc anymore(or image of), everything else fine

I am posting this from the osx forum because this is now obviously a hardware problem.
http://discussions.apple.com/thread.jspa?threadID=1524924&tstart=60
In addition I have swapped the ram chips around and tested them one at a time and made an image of the install disc on a firewire drive and tried to boot.....I get the same kernel panic.
I called apple care and they seems to think it might be a logic board or ram problem. I have some owc ram and crucial. I can just see the "genius bar" saying that that is the problem because it is not apple branded...blah..blah.....and not really get to the heart of the problem.
I have recently added an 8800gt which works fine..... any chance of that being the problem?
Thanks for any extra help!!

Try with two dimms only at a time.
Try with Apple only; Crucial only; OWC only.
Make sure to reset PRAM/NVRAM after each change to clean NVRAM.
run AHT if you have not yet. It is good at finding defective RAM actually, but not for the more difficult 'soft' errors that do occur.
In the kern_excp entries in the panic log it could point to a repeating bad address.
Three vendors RAM may not get along, or one DIMM could be problem; or even one of the Risers.

I have tried for two months to make a movie using video and stills. It is fine in the timeline but then when I burn a disc the stills stick and just keep coming back and covering everything else. I turned the jpegs into Tiffs, then compressed with LZW

I am a beginner but I have made good movies on other programs in the past. I must be doing one basic thing wrong.

Try:
- iOS: Not responding or does not turn on
- Also try DFU mode after try recovery mode
How to put iPod touch / iPhone into DFU mode « Karthik's scribblings
- If not successful and you can't fully turn the iOS device fully off, let the battery fully drain. After charging for an least an hour try the above again.
- Try on another computer
- If still not successful that usually indicates a hardware problem and an appointment at the Genius Bar of an Apple store is in order.
Apple Retail Store - Genius Bar

Can you "bleed" a background image through a DW template?

I'm in the process of redesigning a simple site and am fairly new to working with DW. I created a template with navigation along the left side and a content box on the right. The client requests a background image (which I set in the CSS body tag). However, once I set the content portion of the template it sits on top of the background image (effectively blocking out portions of the background image). I need it to "bleed" through so that the background image covers the entire screen content.
Example: http://www.mchenrycac.org/test/index.html (or see image in the attachment)
Can anyone suggest how to get the image to show through the content portion of the template?
Russ

It took me a few "tries" to place the code in the right place (and a few
different iterations of the example given on the site) but the opacity tag
does work as suggested. Setting the opacity to 100% allows the entire
background to bleed through as I needed.
I had to completely remove the suggested CSS tags for IE7 and IE8 however
and go with just the opacity tag. Tested this in IE8 and Firefox and both
display the opacity correctly with the single opacity statement:
.opaque
The class was added to the table statement in my template (the table that
contains the content area for every web page) and works beautifully. Thank
you for the quick response...
Russ

Background image doesn't fill window in fullscreen mode

Guys I have an image which is bigger than stage, but when I play this movie in player the background image is cropped on each of sides, that is on left and right there is a gray margin around 2cm wide.
Any ideas how to fix this so the background image covers entire stage?
Thank you.

Hi, Thanks for your reply, here is the image, and I've marked the margins with read line.
Thank you.

No background images and missing styles - everything white

somehow every page on firefox displays white with no style or background images. I thought it might have been something having to do with firebug or developer plugin, so I disabled them both, upgraded to the latest firefox version and STILL I have a white screen.

I appreciate the response. I checked the settingx you suggested and everything was correct.
I'm on a mac. Below is the shot of the firefox post we're in right now.
http://calproject.com/firefox/screen-shot-firefox-page.png
So this is not a specific site - its ALL sites... As you can see.... all images and color are missing.
Thanks!

I am trying to use the business card template, but every time I go to copy/paste, my original image won't paste, and everything else disappears. Anyone have any thoughts on this?

I am trying to use the business card template. But every time I go to copy/paste my original image (which I have grouped according to directions) it won't paste, and everything else disappears. Anyone got any thoughts on this?

OK I'll bite.
What business card template?
What directions?
What Pages?
What OSX? Somehow I don't believe the Mac OSX 10.5.8.
What thoughts?
Peter

I have an Imac. When I click to open google maps a permeable but dark screen covers my monitor screen and I get a note that tells me to shut down the computer and restart it. This hasn't helped. Everything else seems to work fine.

When I attempt to open google maps in Firefox on my Imac, a dark screens descends over my monitor screen and a note tells me there's been an error, no number is noted, and that I need to turn off and restart my computer. This doesn't help, but everything else works, including google maps in other browsers.

This is a kernel panic.
First verify that Firefox is fully updated including all extensions.
If this fails to fix....
Restart in Safe Boot mode then open Firefox.
* shutdown
* start the Mac and *wait* for the startup chime to sound
* after the sound, press and hold down the shift key
* keep holding and *wait* until the grey  Apple logo appears
* now release the shift key and just wait (it could take a few minutes)
* eventually the login screen appears with the words SAFE BOOT
* login and open Firefox.
If you continue to have problems see this article for more options to fix.
http://www.macworld.com/article/2027201/how-to-troubleshoot-a-kernel-panic.html

Upgraded to Yosemite and now my desktop background is covered by colorful image

I recently upgraded to Yosemite and now I have an image over my background images that won't go away and is preventing me from accessing my desktop. I took a screen shot of the image and it is posted below. The image is also behind my dashboard widgets too. I messed around with my preferences and made sure that my desktop should be using my pictures and it is (I can see my desktop image for a quick second when I toggle between my dashboard and desktop, but the other image appears as soon as I've toggled over). When I click and double click on the background image nothing happens and I can only access folders and files on my desktop through the finder menu. How can I get this image off of my screen?
MacBook Pro (Mid 2012)
2.5 GHz Intel Core i5
8 GB 1600 MHz DDR3

Have you tried starting up in safe mode to see if it's still there?

Getting a watermark background image to underlay box lines and lines.

I've added a page header to my report with a watermark that underlays following sections. My box lines aren't showing up because the image covers them. Everything else displays above the image. Is there any way to solve this problem without using text boxes with borders?

I tried this and it didn't turn out very well. My image is really light gray in colour (with a white background) and I'm having a rough time making the transparency show up in Crystal since it won't support .GIF images. When I do it in .JPG or .PNG it corrupts the image so bad you can barely see it after its been made transparent. I'm using GIMP 2.0 as my editor. I don't know if there is an easier way to do this. You would think the program would have a simpler way to add a background image into reports. -.-
Edited by: MarcieHennessy on Jan 9, 2010 12:12 AM

Add static background image to all frames of gif animation

First, I'm not a fireworks regular. I use it when I have to to get something done (mostly web optimazations). I would use it more but, frankly in many cases the UI is counter intuitive to everything else adobe makes.
Here is my problem...
I need to add (not replace) a static background to ALL existing frames(states) in a fireworks gif animation (with alpha) , the end product gif will be an element in the Edge web animation...details
I have an animated seq of a rotating object that was created in 3ds max and rendered as a png seq with alpha.
I opened the SEQ "as animation" in fireworks. I set the frame rate. It plays fine. So far so good....
I imported an image that I want to be BEHIND the animated seq on ALL frames. I tried puting it on a sub layer behind, i tried puting it on it's own layer behind, but it ONLY shows on the first frame (state).
I tried using "share with all states" but it replaces the SEQ images already on the "states" instead of adding it behind them like in the arrangement of the layers.
So first, can this be done and if so how?
Second, why is this process so counter intuitive in fireworks? I mean if a layer is behind something then it should be a simple button click or check box etc to say "show on all frames (states)", you know like any other product adobe makes. Even "image ready" made more sense than this. My thought process was that since I needed to end up in fireworks to create and optimize the gif that i should be able to put it together there also but it's turning out to be a lot harder than it should. I guess I can just composite my elements in AE (which is a piece of cake compared to fireworks) and then render another SEQ that I import to fireworks to create the optimized gif. While I'm a fan of the "creative suite" concept, one of my biggest complaints about the "suite" is the lack of master oversite so the common functions, keyboard shortcuts, and fundimental UI concepts are consitant accross all the apps so it functions as a "suite" and not just a collection of seperate applications. I know that demanding that all applications follow certian rules would slow development, in the long run it would make it a lot easier for the end user to spend more time being "creative" and less time trying to figure out why something doesn't work like it does in all the other apps. Just my $.02
Thanks for any help and or explaination
Joel H

Thanks for the response.
You know I tried that exact thing the only difference being I didn't change the layer names. So not naming the layers would keep that from working ?? Also as you eluded to draging layers to position them in fireworks is a delicate operation. It always seems to take 2 or 3 times to get it to drop where you want it. I named the layers and it works as you said. Unfortunately I was really pressed for time so I had already given up on fireworks and just composited the SEQ with the BG layer in AE and kicked out another PNG SEQ and then open that "as animation" in Fireworks and then optimized and exported as a gif. So there are allways several ways to do things.
Thanks again,
Joel H

Inserting 2 background images in to you site

I've seen many sites with more than 1 background images. How
can I do that with Dreamweaver CS3?
I am very curious and I need to know how to do that. I am a
newbie. Please don't give me horrible instructions. If you could
please just give me a link to a tutorial or if it is very simple
just tell me how to do it =]

Ok, try this, it will give you something to play with. Copy
all of the code
below between the *** and *** and paste it into a new html
page.
I did not make the top div 1000px wide, that would cause
quite a few people
to scroll left to right, but change it if you prefer. Your
bottom div will
grow in size depending on content.
Now someone else may have a better suggestion for you, but
this is one way
you can do what you seem to want to do.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#topdiv {
width:90%;
margin:auto;
min-height:800px;
background-image:(right click your mouse, go to Code Hints |
URL Browser,
and find your bakcground image file);
background-position:center;
background-repeat:no-repeat;
border:#000066 thin groove;
background-color:#FFFFCC;
#bottomdiv {
width:90%;
margin:auto;
border:#3333FF thin groove;
background-color:#33FF99;
background-image:(right click your mouse, go to Code Hints |
URL Browser,
and find your background image file);
</style>
</head>
<body>
<div id="topdiv">put 1000 x 800 in the #topdiv css rule
above in the head
tag. You will need to put all of your content containers
inside this div to
keep bg image inplace.</div>
<div id="bottomdiv">Put repeating image in #bottomdiv
in the CSS rule in
your head tag.. If you have content that is going to match up
to content in
the topdiv, you will need to keep same size &
margins.</div>
</body>
</html>
"Cyberhuntera" <[email protected]> wrote in
message
news:[email protected]...
>I want a background design image(1000x800) center;top and
a repeating
> background image(5x5) wich is behind the background.
>
> I am novice still, but I want to learn everything about
HTML.
> For now I know basic HTML and CSS - almost nothing about
it :(
>

Background Image in Spry Menu

Hi everyone,
I'm really struggling with this Spry Horizontal Menu thing. I tried to read thru some other people's duscussions but I got lost.
I just want to add a gradient image instead of a plain color background. Now, I did achieved that on the main level items but as soon as I add submenus, the background image dissapear from the main items and shows on the submenus. That's it. I hope this is easy enough to fix.
I'm not that familiar with CSS and by looking at some samples, the CSS code is embedded in the same HTML page where the menu bar is. Isn't supposed to be on it's own CSS page? And one more thing, can the horizontal menu be inside a table? And if not, how can I center it on the page?
I'm a beginner so please be gentle... : )
Thanks

This is good but my problem is that my background image dissapear from the main menu item as soon as I add a submenu item... everything else seems to work just fine. About the question if the menu could go inside a table or if has to be out side of it, how can I centered it on the page?
thx

Background image covers everything else

Similar Messages

Maybe you are looking for